473,320 Members | 2,003 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

styling input type

I needed to to do a quick width set for form input type="text",

So:

input{
width: 200px;
}

That also styled all my radio buttons!

Is it possible to set a style for just one type?

Jeff
Nov 17 '08 #1
5 2378
In article <rb******************************@earthlink.com> ,
Jeff <jeff@spam_me_not.comwrote:
I needed to to do a quick width set for form input type="text",

So:

input{
width: 200px;
}

That also styled all my radio buttons!

Is it possible to set a style for just one type?
Perhaps look at

<http://www.w3.org/TR/html401/interact/forms.html#adef-size-INPUT>

17.4 The INPUT element

size = cdata [CN]
This attribute tells the user agent the initial width of the control.
The width is given in pixels except when type attribute has the value
"text" or "password". In that case, its value refers to the (integer)
number of characters.

--
dorayme
Nov 17 '08 #2
Jeff wrote:
I needed to to do a quick width set for form input type="text",

So:

input{
width: 200px;
}

That also styled all my radio buttons!

Is it possible to set a style for just one type?
Yes

input[text] {...}

It is called an *attribute* selector.

http://www.w3.org/TR/CSS21/selector....bute-selectors

But, before you get too excited, realize that IE does not support
attribute selectors...
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Nov 17 '08 #3
On 2008-11-17, Jeff wrote:
I needed to to do a quick width set for form input type="text",

So:

input{
width: 200px;
}

That also styled all my radio buttons!

Is it possible to set a style for just one type?
Yes. Add a class to your text input and style that.

HTML: <input class="text" .... >

CSS: input.text { width: 15em; }

(I would avoid using px to set the width.)

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Nov 17 '08 #4
Chris F.A. Johnson wrote:
On 2008-11-17, Jeff wrote:
> I needed to to do a quick width set for form input type="text",

So:

input{
width: 200px;
}

That also styled all my radio buttons!

Is it possible to set a style for just one type?

Yes. Add a class to your text input and style that.

HTML: <input class="text" .... >

I would prefer to set all, and then unset the few I don't want. There's
way to many classes in the typical stylesheet.

Is there a way to revert back to the default, unset width after it
has been set?

<style type="text/css">
input{
width: 15em;
}

..default_class{
width: what unsets width?
}

</style>

<input type="text" ...>
<input type="radio" class="default_class">

Jeff

CSS: input.text { width: 15em; }
>
(I would avoid using px to set the width.)
Nov 18 '08 #5
Jonathan N. Little wrote:
> Is it possible to set a style for just one type?

Yes

input[text] {...}
No, the correct syntax is
input[type="text"] {...}

The selector input[text] would match an input element with an attribute
named text, i.e. <input text="..." ...>, and there's no such element of
course.
But, before you get too excited, realize that IE does not support
attribute selectors...
IE 7 does, in "standards" mode.

Interestingly, IE 7 interprets that the selector also matches an input
element with no type attribute, apparently based on the idea that
type="text" is the default. I think this violates the specifications, since
the selector should match only an element that actually has the attribute
type="text" in markup. Firefox seems to agree with me.

Of course, independently of such support issues, a text input element should
always have the size="..." attribute, so that its size is at some level
defined even when CSS is off; see the CSS Caveats,
http://www.cs.tut.fi/~jkorpela/css-caveats.html

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Nov 18 '08 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Jeff Thies | last post by:
This doesn't work: <input type="radio" style="color: red"> (IE, NS7 windows) What's with that? Styles work on other input types. Cheers, Jeff
17
by: CJM | last post by:
....When I say 'form' I'm talking about a conventional paper version, as opposed to a <form>. I'm building a web-based application which needs to be able to create Invoices/Advice Notes/Order...
3
by: Garmt de Vries | last post by:
On the website of the Dutch Jules Verne Society (www.jules-verne.nl), we have several forms that visitors can use to order something, or to apply for membership. Of course, a form's primary purpose...
2
by: Tony | last post by:
Just wondering - on <input type="file">, the "Browse..." button appears right next to the filename box. I was wondering if there is any way to modify that spacing? Margin & padding don't work -...
3
by: gruntledlark | last post by:
i'm trying to create a style sheet for an existing web application. I have pages that the app generates that gives me input fields inside of table cells. like this: <td><input></td> my...
27
by: Tom Cole | last post by:
I'm starting to do more quantity of javascript coding and thought this might be a good time to investigate code styling. I primarily develop in Java and currently use the code styling techniques...
3
by: Momomo | last post by:
Hi, I am having a problem with a control which is caused by a style on the page which I am not able to trace. If I use the control in a page without any styling it looks ok. Is there a way to...
3
by: nicky77 | last post by:
Hi, before you say it i know frames are bad practice - but i'm developing dynamic content on a site which has already been designed, so alas there's no option but to use them. Anyway, I just want to...
2
by: shapper | last post by:
Hello, I am styling the labels on a section of my page as follows: label {float: left; width: 6.5em;} Now I want to remove this styling from a label that has the class "Message". Mu...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.