What is the best way to style only textboxes with CSS without affecting other input types such as checkboxes?

Question

What is the best way to style only textboxes with CSS without affecting other input types such as checkboxes?

If attribute selectors were universally supported by all browsers, we could effortlessly implement the following styling:

input[type='text'] { font:bold 0.8em 'courier new',courier,monospace; } 
input[type='radio'] { margin:0 20px; } 
input[type='checkbox'] { border:2px solid red;

However, it seems that not all versions of Internet Explorer from 6 and onwards support this feature.

I'm hesitant to use skins for my website. I can't quite pinpoint why, but I remember having a negative encounter with them in the past. It was probably due to my lack of understanding. Are there any drawbacks to using CSS, either internally or externally?

What would be the most effective approach to tackle this issue? Currently, I am assigning unique classes to each type of control.

asp.net css

Answer 1

Answer №1

It is indeed true that IE6 does not recognize the attribute selector feature. Another approach would be to manually assign specific classes to each checkbox. I must admit, however, that I am also unfamiliar with what you mean by "miccing skins".

If you're aiming for compatibility with IE6, one efficient method could be employing a Javascript framework such as jQuery to apply styles to the relevant elements. Using a selector like this:

$('input[type="checkbox"]').each( function() {
    $(this).css({
        'property': 'value'
    });
});

You can then easily and uniformly style checkboxes based on their type across different browsers.

UPDATE:

An error in the initial code has been corrected. Many thanks to Mr. Murdoch for his invaluable assistance, unlike a certain cup of coffee.

Answer 2

It is indeed true that IE6 does not recognize the attribute selector feature. Another approach would be to manually assign specific classes to each checkbox. I must admit, however, that I am also unfamiliar with what you mean by "miccing skins".

If you're aiming for compatibility with IE6, one efficient method could be employing a Javascript framework such as jQuery to apply styles to the relevant elements. Using a selector like this:

$('input[type="checkbox"]').each( function() {
    $(this).css({
        'property': 'value'
    });
});

You can then easily and uniformly style checkboxes based on their type across different browsers.

UPDATE:

An error in the initial code has been corrected. Many thanks to Mr. Murdoch for his invaluable assistance, unlike a certain cup of coffee.

What is the best way to style only textboxes with CSS without affecting other input types such as checkboxes?

Answer №1

Similar questions

"Exploring the Functionality of Dropdown Menus in ASP.NET Core 1

When selecting filter options, the posts/images now overlap before transitioning into a masonry view upon resizing the window

Ensure that only one button from the collection is activated

Varied approaches to managing responsive layouts

Is there a way to use the <form> element with the specified action attribute and a <button> element of type submit to create a button that functions as a hyperlink?

The range slider's color value is not resetting correctly when using the <input>

Navigating a local and server environment with relative paths in a web server's multiple sites

Sending an Array from JavaScript to Asp.net Core

Footer that sticks to the bottom of the page across various pages

Incorporating fresh CSS styles through Selenium

Restoring the background color to its original shade following alterations made by jQuery

The webpage on IE 9 is not aligning in the center

Each request to the ASP.NET application triggers a complete page reload

Ways to move the cursor to the search field after the placeholder text

When the screen is minimized, my website doesn't align to the center as expected

Editing gridview data from multiple tables

Editing the dimensions of the input in Bootstrap 4

Prevent unexpected page breaks in <tr> elements on Firefox (Could JavaScript be the solution?)

Personalized scroll bar within a Chrome application

Utilizing the Strength of Code Snippets and the Art of Style Sheet Separation