jimfog Posted February 25, 2013 Share Posted February 25, 2013 I have a form with various input fields, all of them are set to type=text. In one of them I have also set a class=service. I want to style the one above differently than the other inputs of the form.I have tried these two below with no result: .service{} input[class=service]{} What do you suggest? Link to comment Share on other sites More sharing options...
thescientist Posted February 25, 2013 Share Posted February 25, 2013 can you show us the code you tried? what styles? what did the markup look like? you should always provide code or a link, ideally. Link to comment Share on other sites More sharing options...
jimfog Posted February 25, 2013 Author Share Posted February 25, 2013 can you show us the code you tried? what styles? what did the markup look like? you should always provide code or a link, ideally. I did not include code cause I though it was not needed.Anyway...no problem:<input class="service" size="40" placeholder="Service" type="text" name="service1"> The above is an input field, like others found in the same form.I want to style the above separately than the othersHow am I going to do it?Using input[type=text] will target all the input elements. I tried also using .service{}(that is why I have added a class there) but it does not work. I hope now everything is OK Link to comment Share on other sites More sharing options...
Labtec Posted February 25, 2013 Share Posted February 25, 2013 (edited) Hi Jim give this code a go. I've not tested it yet though. input.services {//your code here} If that doesn't work I think it sounds like you have some other styles declared which would overwrite the style but I'm not sure. Can you post all of your relative HTML and CSS? Regards, Lab. Edited February 25, 2013 by Labtec Link to comment Share on other sites More sharing options...
dsonesuk Posted February 25, 2013 Share Posted February 25, 2013 input.service {//your code here} without ending 's' input[type="text"] {} targets all inputs of type text.or by using attribute selector try input[name="service"] {} Unless you are targetting this somewhere where the selector uses a ID reference '#myform input' for example, where it will have a higher precedence over anything without a ID reference, these should work. Link to comment Share on other sites More sharing options...
jimfog Posted February 26, 2013 Author Share Posted February 26, 2013 input.service {//your code here} without ending 's' input[type="text"] {} targets all inputs of type text. or by using attribute selector try input[name="service"] {} Unless you are targetting this somewhere where the selector uses a ID reference '#myform input' for example, where it will have a higher precedence over anything without a ID reference, these should work. The above did not work but you where right that there was an ID reference with higher precedence-the div that surrounds the form. I used that instead- #xxxx input.service- and now is OK. I do not understand though why this happens. I do not understand how this "precedence" thing works. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 27, 2013 Share Posted February 27, 2013 If you use firebug, and select an element it shows you which has the highest priority by listing them in order from highest to lowest, even though they target the same element, take #myform .myinput {color: orange;}#myform input {color: green;}#myform .myinput2 {color: blue;}input {color:red;}.myinput {color:lime;} with <form action="#" method="get" id="myform"><input class="myinput" type="text" value="some text" /><input class="myinput myinput2" type="text" value="some text" /><input class="myinput" type="text" value="some text" /><input class="myinput myinput2" type="text" value="some text" /><input type="submit" value="some text" /></form> select these through firebug and observe the priority of these selectors they are given #myform .myinput {color: orange;} #myform .myinput2 {color: blue;} The above are identical as with the use of ID with class, but depending on the position within the css style listing, the lower gains a extra higher level against the one above it. But the priority can change, depending if the styling is placed inline <input type="submit" value="some text" style="color: orange;" /> higher priority over those placed in <head></head>, or external stylesheet OR placed in the head only, it would have higher priority over the same selection listed in external stylesheet. it change AGAIN, if !important is used input {color:red !important;} placed in the head, will have higher priority than <input type="submit" value="some text" style="color: orange;" /> UNLESS it too uses !important, then it become higher again, because it uses !important PLUS it is inline. <input type="submit" value="some text" style="color: orange !important;" /> 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