remove form field label and form field border using css

Posted on 2011-10-25
Last Modified: 2012-06-22
I have the following code and using css need to remove the form field label and form field border.  Any idea on how to do that?  i do have a custom.css file to place the css modification.
<div class="entry">

<!-- Fast Secure Contact Form plugin 3.0.4 - begin - -->
<div id="FSContact4" style="width:375px;">
<form action="" id="si_contact_form4" method="post">


               <input type="hidden" name="si_contact_CID" value="1" />

        <div style="firstname_label">
                <label for="si_contact_ex_field4_1">First Name:</label>
        <div style="text-align:left;">
                <input style="firstname_field" type="text" id="si_contact_ex_field4_1" name="si_contact_ex_field1" value=""  size="40" />

<div style="text-align:left; padding-top:2px;">
  <input type="hidden" name="si_contact_action" value="send" />
  <input type="hidden" name="si_contact_form_id" value="4" />
  <input type="submit" id="fsc-submit" style="cursor:pointer; margin:0;" value="Submit" /> </div>

<!-- Fast Secure Contact Form plugin 3.0.4 - end - -->

Open in new window

Question by:COwebmaster
    LVL 53

    Accepted Solution

    To get rid of the label, delete these lines:
    <div style="firstname_label">
                    <label for="si_contact_ex_field4_1">First Name:</label>

    Open in new window

    for the border change this
    <input style="firstname_field" type="text" id="si_contact_ex_field4_1" name="si_contact_ex_field1" value="" >
    to this
    <input style="border:none" type="text" id="si_contact_ex_field4_1" name="si_contact_ex_field1" value="" >

    Open in new window


    Author Comment

    Thanks COBOLdinosaur.  I'm using the wp plugin called Fast Secure Contact Form.

    to activate a field, I have to add in a field label which is why I was thinking of hiding those things I need hidden using css.  Is there a way to hide the label and hide that border via a css entry?
    LVL 53

    Expert Comment

    Is there a way to hide the label and hide that border via a css entry?

    Not likely in a stylesheet. There are no IDs on the elements and they are styled locally.  That takes priority over the external declarations in a stylesheet.  From the look of the non-standaed format of the styles the final presentation is not true css, but rather some kind of scripting.  That is an even bigger problem because styles modified via script would take place after the load and initial rendering. The only way I see around it is direct intervention at the HTML level.  If you cannot make the changes I posted then you are stuck with whatever the vendor's widget allows.

    Your options are accept the limitations of the product or get rid of it and write the code you need yourself.

    Author Closing Comment


    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    jQuery Selector Question 7 38
    Add space before submit button 3 26
    Mobile or not?? 4 26
    Search box won't work. 22 15
    Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now