Jump to content

styling a specific input


jimfog
 Share

Recommended Posts

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

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

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 by Labtec
Link to comment
Share on other sites

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

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

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

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
 Share

×
×
  • Create New...