newcoder1010 Posted August 27, 2015 Share Posted August 27, 2015 (edited) 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 August 27, 2015 by newcoder1010 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 27, 2015 Share Posted August 27, 2015 (edited) 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 August 27, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
davej Posted August 27, 2015 Share Posted August 27, 2015 Also the "for" attribute on the label must match the "id" attribute on the input. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now