Jump to content

How to css a form field


newcoder1010

Recommended Posts

  • Hi, I have created a form as below:Fieldset name: Customer Information   CSS class name: CustomInfoField Name: First Name. Wrapper CSS class: Fname_R.   CSS class for field:  Fname_Cmore fields also created. I put the first name field in CustomInfo fieldset. How can I apply styling to only the First name field only? I would like to:  Make the first name label green.  Make the first name field font color red.  Make the first name placeholder blue.     I am having hard time to write the css just for the first name field.   I am confused when i look at the class/tag hierarchy. Can you please help?

<div id="node-16" class="node >   <div class="content">	    <form class="webform-client-form webform-client-form-16">	            <legend class="panel-heading">					<div class="panel-title fieldset-legend">						Customer Information       					 </div>				</legend>							    <div class="panel-body">						<div  class="FName_R form-item webform-component webform-component-textfield webform-component--CustomInfo--fname">							<label for="edit-submitted-custominfo-fname">First Name</label>							<input required="required" placeholder="Enter first name here" class="FName_C form-control form-text" />						</div>			    </div>	   </form>   </div></div>
Edited by newcoder1010
Link to comment
Share on other sites

IF all inputs, label are going to be same design then

input {color: red;}label {color: green;}
would do. If for specific form
.webform-client-form-16 input {color: red;}.webform-client-form-16 label {color: green;}
If for specific fields using parent container
.FName_R input {color: red;}.FName_R label {color: green;}
placeholder are more complicated see http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css using same principle as above to target specific elements. Your inputs must have name attribute with value, without these, the values entered will not be able to be accessed if submitted to another page. Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...