[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 436
  • Last Modified:

remove form field label and form field border using css

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">
	                	<p>

<!-- Fast Secure Contact Form plugin 3.0.4 - begin - FastSecureContactForm.com -->
<div id="FSContact4" style="width:375px;">
<form action="http://www.domain.org/form#FSContact4" id="si_contact_form4" method="post">

         <div>

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

        <div style="firstname_label">
                <label for="si_contact_ex_field4_1">First Name:</label>
        </div>
        <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>

<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>

</form>
</div>
<!-- Fast Secure Contact Form plugin 3.0.4 - end - FastSecureContactForm.com -->
 <!--END--></p>

Open in new window

0
COwebmaster
Asked:
COwebmaster
  • 2
  • 2
1 Solution
 
COBOLdinosaurCommented:
To get rid of the label, delete these lines:
<div style="firstname_label">
                <label for="si_contact_ex_field4_1">First Name:</label>
        </div>

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

0
 
COwebmasterAuthor Commented:
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?
0
 
COBOLdinosaurCommented:
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.
0
 
COwebmasterAuthor Commented:
Thanks!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now