Css Styles for various <input> elements
paul
button...)
when setup as a style:
<style>
input { font-family: Tahoma; font-size: 25pt }
</style>
Using the above, all 'input' type html elements have the same style.
I thought doing 'input:text' or 'input text' would only apply to the 'input
type=text' elements but it doesn't work.
Any ideas? Is this even possible?
Thanks
McKirahan
news:0689F3BB-90F6-44EA...@microsoft.com...
Will this do? Watch for word-wrap.
<html>
<head>
<title>inputs.htm</title>
<style type="text/css">
.input1 { font-family: Tahoma; font-size: 25pt }
.input2 { font-family: Tahoma; font-size: 25pt; background-color: yellow }
</style>
</head>
<body>
<form>
<input type="text" name="text1" size="10" maxlength="10" class="input1">
<input type="text" name="text2" size="10" maxlength="10" class="input2">
</form>
</body>
</html>
paul
explicitly assign the class attribute for each html input. I want it to
inherit from the style set in the <STYLE> section:
input { font-family: Tahoma; font-size: 25pt }
This works, but unfortunately sets the style for every 'input' type html
control(text, button...).
"McKirahan" wrote:
> "paul" <pa...@discussions.microsoft.com> wrote in message
> news:0689F3BB-90F6-44EA...@microsoft.com...
> > I want to have different styles for various <input> elements ie (text,
> > button...)
> > when setup as a style:
> >
> > <style>
> > input { font-family: Tahoma; font-size: 25pt }
> > </style>
> > Using the above, all 'input' type html elements have the same style.
> > I thought doing 'input:text' or 'input text' would only apply to the
> 'input
> > type=text' elements but it doesn't work.
> >
> > Any ideas? Is this even possible?
> >
> > Thanks
> >
>
> Will this do? Watch for word-wrap.
>
> <html>
> <head>
> <title>inputs.htm</title>
> <style type="text/css">
> ..input1 { font-family: Tahoma; font-size: 25pt }
> ..input2 { font-family: Tahoma; font-size: 25pt; background-color: yellow }
Adrienne
<pa...@discussions.microsoft.com> writing in
news:023FB443-84A0-4B79...@microsoft.com:
> Thanks McKirahan, but that's what I'm trying to avoid. I don't want to
> explicitly assign the class attribute for each html input. I want it
> to inherit from the style set in the <STYLE> section:
>
> input { font-family: Tahoma; font-size: 25pt }
>
> This works, but unfortunately sets the style for every 'input' type
> html control(text, button...).
In CSS2, there is the ability to style input elements based on their
attribute, eg. type="text" would be:
input[type="text"] {background-color: #f00;}
Be aware that some browsers do not support this.
However, what you could do, since you do not want to style all input
elements the same, is create a style for most, then classes for the rest,
eg:
input {background-color: green;}
input.checkbox {background-color:red;}
<form>
<label for="name">Name: </label> <input type="text" name="name" id="name"
value="value">
... more text type input elements
<label for="checkbox">Check box: </label> <input type="checkbox"
id="checkbox" class="checkbox" value="value"> Text
>
>
> "McKirahan" wrote:
>
>> "paul" <pa...@discussions.microsoft.com> wrote in message
>> news:0689F3BB-90F6-44EA...@microsoft.com...
>> > I want to have different styles for various <input> elements ie
>> > (text, button...) when setup as a style:
>> >
>> > <style>
>> > input { font-family: Tahoma; font-size: 25pt } </style>
>> > Using the above, all 'input' type html elements have the same style.
>> > I thought doing 'input:text' or 'input text' would only apply to the
>> > 'input type=text' elements but it doesn't work.
>> >
>> > Any ideas? Is this even possible?
>> >
>> > Thanks
>> >
>>
>> Will this do? Watch for word-wrap.
>>
>> <html>
>> <head>
>> <title>inputs.htm</title>
>> <style type="text/css">
>> ..input1 { font-family: Tahoma; font-size: 25pt }
>> ..input2 { font-family: Tahoma; font-size: 25pt; background-color:
>> yellow } </style> </head> <body> <form> <input type="text"
>> name="text1" size="10" maxlength="10" class="input1"> <input
>> type="text" name="text2" size="10" maxlength="10" class="input2">
>> </form> </body> </html>
>>
>>
>>
>
--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
paul
That's exactly what I'm looking for. Do you know if IE 5.5 + is compliant
with CSS2?
I tried the below but the style didn't take. Any ideas?
Here's the page.
<html>
<head>
<title>New Page 1</title>
<style>
input[type="text"] {background-color: red; color:blue}
</style>
</head>
<body>
<form method="POST" >
<input type="text" name="T1" size="20" value="some value here" ></p>
</form>
</body>
</html>
Thanks!
"Adrienne" wrote:
> Gazing into my crystal ball I observed "=?Utf-8?B?cGF1bA==?="
> <pa...@discussions.microsoft.com> writing in
> news:023FB443-84A0-4B79...@microsoft.com:
>
> > Thanks McKirahan, but that's what I'm trying to avoid. I don't want to
> > explicitly assign the class attribute for each html input. I want it
> > to inherit from the style set in the <STYLE> section:
> >
> > input { font-family: Tahoma; font-size: 25pt }
> >
> > This works, but unfortunately sets the style for every 'input' type
> > html control(text, button...).
>
> In CSS2, there is the ability to style input elements based on their
> attribute, eg. type="text" would be:
>
> input[type="text"] {background-color: #f00;}
>
> Be aware that some browsers do not support this.
>
> However, what you could do, since you do not want to style all input
> elements the same, is create a style for most, then classes for the rest,
> eg:
>
> input {background-color: green;}
> input.checkbox {background-color:red;}
>
> <form>
> <label for="name">Name: </label> <input type="text" name="name" id="name"
> value="value">
> .... more text type input elements
Adrienne
<pa...@discussions.microsoft.com> writing in
> Hi Adrienne,
> That's exactly what I'm looking for. Do you know if IE 5.5 + is
> compliant with CSS2?
> I tried the below but the style didn't take. Any ideas?
> Here's the page.
>
><html>
><head>
><title>New Page 1</title> <style> input[type="text"] {background-color:
> red; color:blue} </style> </head> <body> <form method="POST" >
> <input type="text" name="T1" size="20" value="some value here" ></p>
> </form> </body> </html>
>
> Thanks!
AFAIK, IE does not support that, sorry. :-(
I think you're going to have to go with option 2, create classes for those
inputs that you are not using that much, and style the regular inputs with
just the element name. A class will over ride however the element is
styled.
For example, if you have 20 input type="text", and one input type="submit"
then you could assign the submit one a certain class.
Either that, or get everyone to use a better browser. ;-)