Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 31762
  • Last Modified:

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

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
BruceCheng
Asked:
BruceCheng
  • 8
  • 5
  • 4
  • +7
1 Solution
 
hyperslugCommented:
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
 
hsmtpCommented:
Use this:

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

But looks like IE doesn't understand it.
0
 
seanpowellCommented:
>>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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
BruceChengAuthor Commented:
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
 
seanpowellCommented:
I'm afraid there aren't any. You can't do what you need with IE and CSS. Sorry...
0
 
mreuringCommented:
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
 
seanpowellCommented:
Very funny - I removed that expression as it will crash IE...
0
 
mreuringCommented:
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
 
mreuringCommented:
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
 
keteracelCommented:
>  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
 
seanpowellCommented:
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
 
BruceChengAuthor Commented:
I tried it.

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

Thanks.
0
 
mreuringCommented:
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
 
BruceChengAuthor Commented:
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
 
seanpowellCommented:
Then we're back to square one... IE cannot differentiate between inputs just with CSS.
0
 
mreuringCommented:
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
 
COBOLdinosaurCommented:
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
 
seanpowellCommented:
http:#11737701
>>The only other option is if the text and button elements are in separate areas...

:-)
0
 
COBOLdinosaurCommented:
Oh... I guess I should have added suggested by Sean.

Cd&
0
 
seanpowellCommented:
It's just too bad we have to go to all this trouble for a 3 year old browser...
0
 
Joakim_Commented:
<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
 
arantiusCommented:
Use <button type="submit"> instead of <input type="submit>
Then apply styles to input.
0
 
parki01Commented:
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
 
seanpowellCommented:
Hi Bruce,

Can you advise on the status of this question?

Thanks,
Sean
0
 
BruceChengAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 8
  • 5
  • 4
  • +7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now