View Full Version : CSS for multiple different input types

10-29-2011, 07:38 PM
I have a form with some text fields and some buttons. The buttons control if the text fields can be edited. When in edit mode the text fields change colour etc. There is quite a bit of positioning involved for these buttons and fields. I am trying to do the following.
Have one style for buttons.
One style for text fields when in edit mode.
One style for text fields when in non edit mode.
Then each button and text field needs to have location specified in a separate style component.
The problem I have is that these are all "input" tags. I have searched net and found nothing on how to do this.
I want to put css in external file

Any valid suggestion will be helpful thanks

10-29-2011, 07:54 PM
Use the attribute selector:

input[type=text] {…}
input[type=submit] {…}

This is looking for all inputs that have a type attribute with the respective value.

I don’t know, however, what you mean by “edit mode”.

10-29-2011, 10:27 PM
Thanks for that - I found an example using the type attribute - but could not figure out how I would use it for
my application.

I have the text inputs set to disable to prevent text entry until one of the buttons is pressed.
So for the text inputs I need to do something like this:

input for disabled mode
border: 1px solid #006;
background-color: #011901;

input for enabled mode (I called this edit mode)
border: 1px solid #006;
background-color: #ffffff;

then for each input I need something like:

width: 180px;
left: 60px;
width: 140px;
left: 539px;
width: 20px;
left: 692px;

Many of the setting are the same for both the enabled and disabled mode. So I guess I need one part that is common to both enabled and disabled mode
One part that is different for each mode and then each text box needs a separate part that gives its position and width.

10-30-2011, 01:06 AM
OK, one way to differentiate between disabled and “enabled” inputs is, again, the attribute selector:

input[disabled] {…} /* look for inputs with “disabled” attribute */

So, at first you would apply default styles to all text inputs and then you’d override styles for disabled inputs, e. g.:

input[type=text] {background-color: yellow;}
input[disabled] {background-color: lime;}
/* or even more specific */
input[type=text][disabled] {background-color: aqua;}

Another way to differentiate various inputs of the same type is by name attribute since usually all inputs have that:

input[name=zone] {…}

However, usually, inputs have a label associated with them, and therefore need a unique ID, too, through which they can be adressed:

<label for="i_name">Name</label>
<input id="i_name" name="name" type="text" />
<label for="i_zone">Zone</label>
<input id="i_zone" name="zone" type="text" />

Therefore you could do:

#i_name {…}
#i_zone {…}

You could even do something like this:

#i_name[disabled] {…}

10-30-2011, 06:37 AM
I am trying to do the following.
Have one style for buttons.You can use one of the following depending upon which HTML elements and attributes are being used:

button { /* */ }
input[type="submit"] { /* */ }
input[type="button"] { /* */ }
input[type="image"] { /* */ }

If you are using input elements for your buttons, I would consider converting them to button elements. The latter are easier to use, IMO, because you can put other HTML elements inside of them and because they make CSS selectors less verbose.

One style for text fields when in edit mode.
One style for text fields when in non edit mode.You can use CSS3+/HTML5 selectors for this:

input:enabled { /* */ }
input:disabled { /* */ }

I believe these are supported in the latest release of every browser, but attribute selectors are probably better supported in case older browsers must be taken into account.

11-01-2011, 10:24 PM
Thanks guys - you have help me sort out my problems :)