Is it safe to exclusively use CSS Selector [type="text"] instead of input[type="text"]?

Question

Is it safe to exclusively use CSS Selector [type="text"] instead of input[type="text"]?

I've been pondering the safety of exclusively using [type="text"] instead of input[type="text"] in CSS.

My concern is that when using input[type="text"], I'm unable to override it with a single class selector.

// HTML
<input type="text" class="has-error">

// CSS
input[type="text"] { color: black; } // has higher specificity than the one below
.has-error { color: red; }           // won't override

Are there any other HTML elements that utilize the type attribute? I have not encountered any other tags that use it so far.

Thank you

html css

Answer 1

Answer №1

Here is a list of tags that support the type attribute:

<button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu>

(source)

The only tag that allows the 'text' value for the type attribute is the input tag.

Therefore, using [type="text"] should work as expected if the HTML markup is correct and the styling rules are only applied to input elements with the type text.

Answer 2

Here is a list of tags that support the type attribute:

<button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu>

(source)

The only tag that allows the 'text' value for the type attribute is the input tag.

Therefore, using [type="text"] should work as expected if the HTML markup is correct and the styling rules are only applied to input elements with the type text.

Answer 3

Answer №2

Using tagname for selection with attributes is more efficient than selecting all tags and then filtering them. It may seem optional, but it's good to keep it in mind.

To override, follow these steps:

input[type="text"] { color: black; }
input[type="text"].has-error { color: red; }

You can view the example here: http://example.com

Answer 4

Using tagname for selection with attributes is more efficient than selecting all tags and then filtering them. It may seem optional, but it's good to keep it in mind.

To override, follow these steps:

input[type="text"] { color: black; }
input[type="text"].has-error { color: red; }

You can view the example here: http://example.com

Answer 5

Answer №3

It is considered safe to use as long as there are no other elements with a type attribute. However, if there is an element like "<ul>" that has a type attribute, it may be selected as well. Since you are also filtering by "text" as a type, there should not be conflicts with built-in tags, but conflicts may arise with plugins, custom tags, etc. To avoid this, consider using input[type="text"] instead.

Answer 6

It is considered safe to use as long as there are no other elements with a type attribute. However, if there is an element like "<ul>" that has a type attribute, it may be selected as well. Since you are also filtering by "text" as a type, there should not be conflicts with built-in tags, but conflicts may arise with plugins, custom tags, etc. To avoid this, consider using input[type="text"] instead.

Is it safe to exclusively use CSS Selector [type="text"] instead of input[type="text"]?

Answer №1

Answer №2

Answer №3

Similar questions

Fade between two elements using jQuery

Utilizing Angular's DomSanitizer to safely bypass security scripts

AngularJS allows you to toggle the visibility of a div at set intervals, creating

How to pass the id value between pages in web developmentactics?

Creating separation between a dropdown menu and its corresponding button

The combination of two equal height elements with absolutely positioned child elements

The background image on my link bar is inexplicably not appearing

Using jQuery, compare the values of two elements and update the class based on the comparison outcome

Modifying the position of an HTML element within its parent tag using document.createElement

Tips for utilizing flexbox to position a button to the right of an InputSelect

Tips for personalizing tooltips in Bootstrap 4

Modify the width of the progress bar in Bootstrap using AngularJS

Determine if the HTML Application Cache is void

Using "-webkit-overflow-scrolling: touch" can cause issues with the CSS 3D perspective rendering

JQuery does not immediately update the input value

Is there a way to address this scrollbar issue without relying on HTML?

Tips on how to connect with ngFor

The default values for CSS filters

The ng-click functionality seems to be malfunctioning when used within the controller in conjunction with ng-bind

Dividers afloat - expanding current script with multiple additions