Solved

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

Posted on 2004-08-06
26
31,638 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

747 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

12 Experts available now in Live!

Get 1:1 Help Now