Css For Input Text Only I dont think there is a solution but...

[vdhieu84 0]

I have read (or glimse through) all the CSS 2 specification and google a lot but found no solution for the following problem. Anyone can help?

 

The basic idea is the input field for the type text, password is quite small, so I want to change its width by CSS

 

input {   width : 400px;}

However, this affects the width of the radio button too (in most current browser).

 

Is there anyway that I can apply this CSS to input field which is of the type text or password ONLY?

 

The tricky part is I MUST NOT use any additional attribute in input field, like class or id...

[clagnol1405241508 0]

I rarely work with forms, so I don't have any ideas besides using class/ids. Why exactly are you avoiding the use of class and id?

[abhiram 0]

Well... without any class or id attribute, I don't think it's possible to do it. Besides, why don't you want to use them?

[vdhieu84 0]

Well, I always try to avoid as much class and id as I can since along the way when we writing code, once in a while I will forget to put these attribute in. Even though I will eventually figure out where in my code I missed, it's still better to have a "global" setting which will makes sure consistency for me.

[vizskywalker 0]

There is one possible solution, although 1) i have never tested it, and 2) I don't know if it is valid CSS.

Try this:

input:text {  width: 400px;}

The alternative is to simply pecify width in the html tag without using css, or nest the input in a <style> tag.

~Viz

[Retaining 0]

You can match <input> elements that have the type=text property in CSS2 by using the rule "input[type=text] { }". However, I highly doubt that this is fully supported by many browsers, and so your best choice would probably be to nest the input inside a span like viz said.

Notice from vizskywalker:

Edited on user's Request, next time, report the post instead of making another one though

[Hercco 0]

You can match <input> elements that have the type=text property in CSS2 by using the rule "input[type=text] { }".  However, I highly doubt that this is fully supported by many browsers, and so your best choice would probably be to nest the input inside a span like viz said.

1064329982[/snapback]

This is the way to do it. It is good coding style to define the type attribute for all form fields, although "text" is assumed the default.

 

This is in fact supported in many browsers, but not in Internet Explorer (surprise, surprise ) Usually this isn't a problem as CSS is most of the time used to change the form field colours, backgrounds, borders; stuff that IE users can do without. But width is something you gotta get right on every browser.

 

If you really need the option and can't come up with other solution, you might wish to try Dean Edwards IE7: http://dean.edwards.name/IE7/ It fixes most if IE CSS issues, with no need for users to install anything.

[Hercco 0]

Change: "It is good coding style to define the type attribute for all form fields" to "It is good coding style to define the type attribute for all form fields anyways"

 

You absolutely need to define the attribute in order the CSS2 attrribute matching to work.

[Houdini 0]

There is one possible solution, although 1) i have never tested it, and 2) I don't know if it is valid CSS.

 

Try this:

input:text {  width: 400px;}

The alternative is to simply pecify width in the html tag without using css, or nest the input in a <style> tag.

 

~Viz

1064329968[/snapback]

Try this

<input type="text" style="width:400px" />

you can use a sty;e with most HTML elements such as the input, the above code will make a test box that is 400px wide and yes it is valid so embed the style into the tag you are concerned with when you told it input (width:400px then all input types took on that attribute, just use it in those input fields by whatever type you want to effect because you have text inputs, submit inputs, password input, checkbox inputs radio button inputs and so on, so you need to just put the style in those you want to make bigger.

[vdhieu84 0]

Try this

<input type="text" style="width:400px" />

you can use a sty;e with most HTML elements such as the input, the above code will make a test box that is 400px wide and yes it is valid so embed the style into the tag you are concerned with when you told it input (width:400px then all input types took on that attribute, just use it in those input fields by whatever type you want to effect because you have text inputs, submit inputs, password input, checkbox inputs radio button inputs and so on, so you need to just put the style in those you want to make bigger.

1064330075[/snapback]

You didn't read my orginal post. I said that there must be no additional attribute put in HTML code. `style` here is an attribute, and yes, I can't use it. I searched the internet for the whole 3 days and read the CSS2 specification over and over again... and probably I have to admit that they don't support it (at least for now).

[Hercco 0]

I searched the internet for the whole 3 days and read the CSS2 specification over and over again... and probably I have to admit that they don't support it (at least for now).

1064330157[/snapback]

Yes they support it with attribute matching ( [type=text] ). Its just Microsoft that doesn't support this. By they way does anyone know if the new IE version will be compliant in this?
Edited December 20, 2005 by twitch (see edit history)

[vdhieu84 0]

Yes they support it with attribute matching ( [type=text] ). Its just Microsoft that doesn't support this. By they way does anyone know if the new IE version will be compliant in this?

1064332670[/snapback]

Oh well, that's very true. But the unfortunated fact is that 70% of the traffic accessing my websites are from users who use IE. And even the new version of IE released (I thought that it only compatible with the new OS), people not gonna update it soon :|.

[twitch 0]

You need to cheat the system, by using textarea.

 

You can use the textare just like the form input, but it allows you more control. And by simply using CSS to change the heigh, width and font styles of your textarea, you can do anything with it. Just remember to include overflow: hidden; so that none of the scrollbars show and you should be fine.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://forums.xisto.com/no_longer_exists/ Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">textarea	{   height: 18px;   line-height: 18px;   overflow: hidden;   width: 400px;}</style></head><body><form name="form1" method="post" action="">	<textarea name="textarea" cols="1" rows="1"></textarea></form></body></html>

Hope that helps

[Khymnon 0]

A brilliant idea, twitch. Absolutely brilliant. Two thumbs-up for that one.Actually, as far as IE7 and Microsoft in general are concerned, they don't worry so much about compliance with the W3C standards, including CSS. I haven't read anything about CSS support in IE7, but I wouldn't count on it too much. Plus, basic tests show that this bad boy is going to be devilishly vicious on system resources, so I don't suppose many will use it until Microsoft works it out.If you absolutely can't use attributes, then I believe there isn't a way to do what you want, except for going with twitch's idea.

[iGuest 3]

I'm just wondering why you're not using the width attribute in that element which isn't deprecated, it will be when XForms takes over HTML Forms though.What your problem really seems to be though is the lack of standard support, although, using input { width: 400px; } will affect most input elements, where as input[type=text] would be more suited to what you want but the lack of support is the downfall.The textarea solution seems alright, is it avoiding newline characters? Would it require javascript to take the event of the keypress if it's allowed to submit the default form button?Cheers,MC