Solved

How to set input text style without adding CSS class attribute to all input boxes?

Posted on 2004-08-06
26
31,657 Views
Last Modified: 2012-08-14
I need to assign some style sheet settings for all input text and buttons. Input text and buttons have different font-size settings.

I use <input type="text" ...> and <input type="button" ...> for text boxes and buttons.

Does anybody know how to set their style sheet without adding classes to all input text boxes?

I know I can use

INPUT
{
      font-size: 7pt;
      font-family: Tahoma
}

But this way, text boxes and buttons will get the same font-size. How can I set text boxes and buttons with different font-sizes.

Thanks a lot.
0
Comment
Question by:BruceCheng
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
  • 4
  • +7
26 Comments
 
LVL 3

Expert Comment

by:hyperslug
ID: 11736687
Use separate classes:

<style>
INPUT.btn
{
     font-size: 12pt;
     font-family: Tahoma
}
INPUT.txt
{
     font-size: 7pt;
     font-family: Tahoma
}
</style>
<input class="txt" type="text" value="test" />
<input class="btn" type="button" value="test" />
0
 
LVL 6

Expert Comment

by:hsmtp
ID: 11736800
Use this:

input[type="button"] {
    color: #FF9900;
width: 200px;
}
input[type="text"] {
    color: green;
}

But looks like IE doesn't understand it.
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 125 total points
ID: 11737701
>>without adding classes to all input text boxes
can't be done I'm afraid. The only other option is if the text and button elements are in separate areas.

>>input[type="button"]
Would be nice, but you're correct, IE has no idea what any of that means.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:BruceCheng
ID: 11737891
hyperslug, I don't want to specify class attribute to all buttons and text boxes because I have a tight schedule now.

hsmtp: I use IE.

Does anybody else have any suggestion to make it work in IE?

Thanks.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11737988
I'm afraid there aren't any. You can't do what you need with IE and CSS. Sorry...
0
 
LVL 17

Expert Comment

by:mreuring
ID: 11738514
Well, here's an IE-only, verry simple hack to make it work :)
      <style type="text/css">

<part of code removed by seanpowell...>

            input.text {
                  border: 2px solid blue;
            }
            input.button {
                  border: 2px solid yellow;
            }
      </style>
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11738606
Very funny - I removed that expression as it will crash IE...
0
 
LVL 17

Expert Comment

by:mreuring
ID: 11738664
Serious? It ran on my machine without a sweat. Hmm, sorry about that than!!
Let me see if I can make it more safe.
0
 
LVL 17

Expert Comment

by:mreuring
ID: 11738730
I know it's just a lousy hack to get around yet another one of IE's shortcomings, but could you humour me and see if this doesn't crash your browser Sean?
      <style type="text/css">
            input {
                  -mso-attribute-selector-hack:expression( addAttributeName(this) );
            }
            input.text {
                  border: 2px solid blue;
            }
            input.button {
                  border: 2px solid yellow;
            }
      </style>
      <script>
            function addAttributeName(node) {
                  if (node.type&&!(node.className&&node.className.indexOf(node.type)>=0)) {
                        node.className = node.type;
                  }
            }
      </script>
Thanx,

 Martin
0
 
LVL 9

Expert Comment

by:keteracel
ID: 11738817
>  I'm afraid there aren't any. You can't do what you need with IE and CSS. Sorry...
you could  write a javascript function to iterate through all the forms on the page and change the font of all the  text areas...
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11738877
That seems better, I'll do some further testing when I get home...
I assume it's valid for IE 5 and up only, yes? IE mac would be a no go?

There's not much you can't do with the DOM and javascript - I was merely stating that it's not something IE's CSS supports.
0
 
LVL 1

Author Comment

by:BruceCheng
ID: 11739137
I tried it.

input.button works. But input.text doesn't work. You can test again.

Thanks.
0
 
LVL 17

Expert Comment

by:mreuring
ID: 11739151
This is, to the best of my knowledge an IE Win 5+ feature, so I wouldn't bother testing it on a mac, but than the mac might accually understand attribute selectors instead :)

And, yes, a javascript to itterate through the forms would be dead-easy, I was merely testing if above css-hack would take that work out of our hands while not bothering non-IE browsers and it's yet to find out if scripting in any way is acceptable to BruceCheng...
0
 
LVL 1

Author Comment

by:BruceCheng
ID: 11739180
Sorry. I didn't notice your code need to use that Javascript. I don't think I can use that. I'd rather add class attribute for all my text boxes than use Javascript.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11739214
Then we're back to square one... IE cannot differentiate between inputs just with CSS.
0
 
LVL 17

Expert Comment

by:mreuring
ID: 11739241
If the javascript is no longer threatening to crash the browser I might be able to integrate it back into the expression, but it'll still be running a script. CSS does not allow us to select an element by attribute values in IE, thus we have to work around this by adding a class. There's several ways of adding such a class, manual, server-side, or client-side. But as long as we're trying to support IE, we have to use classes.
So, if you'd rather not have a scripted solution, I would have to side with Sean's earlier comment and say 'not possible'.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11743282
Once possibility I have not seen yet is to use fieldsets:

<style type="text/css">
fieldset.txt input {font-size:10px}
fieldset.butt input {font-size:15px}
</style>

It means putting a class on the fieldsets but it might save quite abit if the input type already have some regionalization on the page:

<fieldset class="txt>
<input type="text" >
<input type="text" >
<input type="text" >
<input type="text" >
<input type="text" >
</fieldset>
<fieldset class="butt">
<input type="reset"><input type="submit">
</fieldset>

Cd&

0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11743304
http:#11737701
>>The only other option is if the text and button elements are in separate areas...

:-)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11743748
Oh... I guess I should have added suggested by Sean.

Cd&
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11743768
It's just too bad we have to go to all this trouble for a 3 year old browser...
0
 
LVL 2

Expert Comment

by:Joakim_
ID: 11750938
<input type="text" style="font-size: 8pt; color: 000000...

Or if you use a server-side language, you can use a way to include the STYLE-tag.
0
 
LVL 18

Expert Comment

by:arantius
ID: 11754590
Use <button type="submit"> instead of <input type="submit>
Then apply styles to input.
0
 

Expert Comment

by:parki01
ID: 11891424
Example of a form I'm currently developping:

<form action="#" method="post" id="persgegevens">
  <fieldset>
    <legend>Website</legend>
    <label for="login">Login : </label><input type="text" name="login" id="login" tabindex="101" accesskey="l" value="db_login" /><br />
    <label for="password">Paswoord : </label><input type="text" name="password" id="password" tabindex="102" accesskey="p" value="db_password" /><br />
  </fieldset>
  <fieldset>
    <legend>Ronde Tafel</legend>
    <label for="rt_id">ID : </label><input type="text" name="rt_id" id="rt_id" accesskey="i" tabindex="103" value="db_rt_id" /><br />
    <label for="type_id">Type : </label><select name="type_id" id="type_id" tabindex="104">
      <option value="1">lid</option>
      <option value="2">senior</option>
      <option value="3">voorzitter</option>
    </select>
    <br />
  </fieldset>
  <fieldset>
    <legend>Persoonlijk</legend>
    <label for="name">Naam : </label><input type="text" name="name" id="name" accesskey="n" tabindex="105" value="db_name" /><br />
    <label for="firstname">Voornaam : </label><input type="text" name="firstname" id="firstname" accesskey="v" tabindex="106" value="db_firstname" /><br />
    <label for="email">Email : </label><input type="text" name="email" id="email" accesskey="e" tabindex="107" value="db_email" /><br />
    <label for="mobile">GSM : </label><input type="text" name="mobile" id="mobile" accesskey="g" tabindex="108" value="db_mobile" /><br />
    <label for="url">Website : </label><input type="text" name="url" id="url" accesskey="w" tabindex="109" value="db_url" /><br />
  </fieldset>
  <fieldset class="keuze">
    <legend>Voorkeuren</legend>
      <input type="checkbox" name="html" id="html" accesskey="h" tabindex="110" /><label for="html"> HTML</label><br />
      <input type="checkbox" name="active" id="active" accesskey="a" tabindex="111" /><label for="active"> Aktief</label><br />
      <input type="checkbox" name="board" id="board" accesskey="b" tabindex="112" /><label for="board"> Bestuur</label><br />
  </fieldset>
  <fieldset class="knop">
    <legend>Actie</legend>
    <input type="submit" value="Opslaan" tabindex="113" /> <input type="reset" value="Opnieuw" tabindex="114" />
  </fieldset>
</form>

CSS that goes with this:

label
{
      display: block;
      float: left;
      margin-bottom: 5px;
      text-align: right;
      width: 100px;
      padding-right: 10px;
}
input,textarea,select
{
      color: #333;
      font-family: verdana, arial, helvetica, sans-serif;
      font-size: 12px;
}
input
{
      display: block;
      width: 150px;
      float: left;
      margin-bottom: 5px;
      cursor: pointer;
      cursor: hand;
}
select
{
      width: 154px;
      margin-bottom: 5px;
}
fieldset
{
      margin: 0px 0px 10px 0px;
}
fieldset.keuze label
{
      text-align: left;
      padding-top: 3px;
}
fieldset.keuze input
{
      width: 25px;
      margin-left: 40px;
}
fieldset.knop input
{
      width: 80px;
      float: right;
      margin-right: 10px;
}
legend
{
      color: #09F;
      padding: 0px 5px 5px 3px;
}
br
{
      clear: left;
}
#persgegevens
{
      width: 300px;
}

As you can see I gave my input areas default formatting.
Then I override some of the formatting through the fieldsets and once by using a class.

About the example of arantius.  <button type="submit"> isn't fully supported by all browsers.  Especially IE has problems with this.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11914840
Hi Bruce,

Can you advise on the status of this question?

Thanks,
Sean
0
 
LVL 1

Author Comment

by:BruceCheng
ID: 12354321
Sorry for not responding to this topic for a long time. I was busy and forgot about this question. I decided to go through all my pages and added classes to my text boxes and buttons. I believe in IE, there is no easy way to set different fonts to text boxes and buttons without using classes.

Thanks.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

632 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question