Solved

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

Posted on 2004-08-06
26
31,640 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
  • 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

919 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now