Solved

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

Posted on 2004-08-06
26
31,648 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Width of Page is Affecting Side Menu 6 31
CSS: Making Pure CSS read more boxes thinner 5 41
Checkout Page Input Field not aligned 1 26
removing a class in javascript 4 50
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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…

828 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