styling input type

[Jeff]

I needed to to do a quick width set for form input type="text",

So:

input{
width: 200px;
}

That also styled all my radio buttons!

Is it possible to set a style for just one type?

Jeff

[dorayme]

Re: styling input type

In article <rbWdnbJlFYQyUb zUnZ2dnUVZ_snin Z2d@earthlink.c om>,
Jeff <jeff@spam_me_n ot.comwrote:

I needed to to do a quick width set for form input type="text",
>
So:
>
input{
width: 200px;
}
>
That also styled all my radio buttons!
>
Is it possible to set a style for just one type?
>

Perhaps look at

<http://www.w3.org/TR/html401/interact/forms.html#adef-size-INPUT>

17.4 The INPUT element

size = cdata [CN]
This attribute tells the user agent the initial width of the control.
The width is given in pixels except when type attribute has the value
"text" or "password". In that case, its value refers to the (integer)
number of characters.

--
dorayme

[Jonathan N. Little]

Re: styling input type

Jeff wrote:

I needed to to do a quick width set for form input type="text",
>
So:
>
input{
width: 200px;
}
>
That also styled all my radio buttons!
>
Is it possible to set a style for just one type?

Yes

input[text] {...}

It is called an *attribute* selector.

http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

But, before you get too excited, realize that IE does not support
attribute selectors...


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

http://www.LittleWorksStudio.com

[Chris F.A. Johnson]

Re: styling input type

On 2008-11-17, Jeff wrote:

I needed to to do a quick width set for form input type="text",
>
So:
>
input{
width: 200px;
}
>
That also styled all my radio buttons!
>
Is it possible to set a style for just one type?

Yes. Add a class to your text input and style that.

HTML: <input class="text" .... >

CSS: input.text { width: 15em; }

(I would avoid using px to set the width.)

--
Chris F.A. Johnson <http://cfaj.freeshell. org>
=============== =============== =============== =============== =======
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

[Jeff]

Re: styling input type

Chris F.A. Johnson wrote:

On 2008-11-17, Jeff wrote:

> I needed to to do a quick width set for form input type="text",
>>
>So:
>>
>input{
> width: 200px;
>}
>>
>That also styled all my radio buttons!
>>
> Is it possible to set a style for just one type?

>
Yes. Add a class to your text input and style that.
>
HTML: <input class="text" .... >

I would prefer to set all, and then unset the few I don't want. There's
way to many classes in the typical stylesheet.

Is there a way to revert back to the default, unset width after it
has been set?



<style type="text/css">
input{
width: 15em;
}

..default_class {
width: what unsets width?
}

</style>

<input type="text" ...>
<input type="radio" class="default_ class">

Jeff

CSS: input.text { width: 15em; }

>
(I would avoid using px to set the width.)
>

[Jukka K. Korpela]

Re: styling input type

Jonathan N. Little wrote:

> Is it possible to set a style for just one type?

>
Yes
>
input[text] {...}

No, the correct syntax is
input[type="text"] {...}

The selector input[text] would match an input element with an attribute
named text, i.e. <input text="..." ...>, and there's no such element of
course.

But, before you get too excited, realize that IE does not support
attribute selectors...

IE 7 does, in "standards" mode.

Interestingly, IE 7 interprets that the selector also matches an input
element with no type attribute, apparently based on the idea that
type="text" is the default. I think this violates the specifications, since
the selector should match only an element that actually has the attribute
type="text" in markup. Firefox seems to agree with me.

Of course, independently of such support issues, a text input element should
always have the size="..." attribute, so that its size is at some level
defined even when CSS is off; see the CSS Caveats,

http://www.cs.tut.fi/~jkorpela/css-caveats.html

--
Yucca, http://www.cs.tut.fi/~jkorpela/