How to Style <Input Type="Text"> in IE6 CSS

How to style input type=text in IE6 CSS?

AFAIK, IE6 does not support attribute selectors, so I think the answer is no. You'd have to use one of the following:

  1. Add a common class attribute to all <input type="text"/> elements.
  2. Use JavaScript, as you suggested.

Both of which you want to avoid. Too bad.

Why input[type=text] is not working in IE

It works fine in IE8, assuming the page is loading in IE7 or IE8 standards mode (not quirks)

Edit

You've said you're using IE8. In which case, use the developer tools (F12), locate your text box, and check what styles are being applied.

Edit 2

Don't know which version of reporting services you're using. Just went to a 2000 instance, and the report manager is serving up pages that render in quirks mode, so good luck getting much, if any, styling to work.

Edit 3

You may be able to force IE to render in IE8 mode by adding a meta tag to the head within the aspx pages. E.g. :

<head>
<meta http-equiv="X-UA-Compatible" content="IE=100" >
<!-- Rest of <head> -->

IE6 input type='text' / width issue

IE6 doesn't support the attribute selector in CSS.

You will to select those elements using an IE6 compatible way, such as classes.

Css style problems on input in IE8

Try specifying a line-height: 34px or thereabouts.

CSS selector for text input fields?

input[type=text]

or, to restrict to text inputs inside forms

form input[type=text]

or, to restrict further to a certain form, assuming it has id myForm

#myForm input[type=text]

Notice: This is not supported by IE6, so if you want to develop for IE6 either use IE7.js (as Yi Jiang suggested) or start adding classes to all your text inputs.

Reference: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors


Because it is specified that default attribute values may not always be selectable with attribute selectors, one could try to cover other cases of markup for which text inputs are rendered:

input:not([type]), /* type attribute not present in markup */
input[type=""], /* type attribute present, but empty */
input[type=text] /* type is explicitly defined as 'text' */

Still this leaves the case when the type is defined, but has an invalid value and that still falls back to type="text". To cover that we could use select all inputs that are not one of the other known types

input:not([type=button]):not([type=password]):not([type=submit])...

But this selector would be quite ridiculous and also the list of possible types is growing with new features being added to HTML.

Notice: the :not pseudo-class is only supported starting with IE9.

Input text field not working in Internet explorer 10

OK, I was able to make it work and render as expected on all browsers after couple of minor modifications:

I added the class "input-lg" and removed margin and padding from my CustomInputStyle class

.CustomInputStyle {
text-align: center;
margin-top: 20px;
padding: 25px;
font-size: 24px;
font-weight: bold;
}

.CustomInputStyle2 {
text-align: center;
font-weight: bold;
font-size: 24px;
}

Here is the fiddle which demonstrate this: https://jsfiddle.net/pjdixit/kfev4rss/4/

Test Input 1's text (which used previous styling) won't be visible and won't display typed text in Internet Explorer and Firefox but Test Input 2 (which uses modified styling described above) should work in all major browsers.



Related Topics



Leave a reply



Submit