input[type='text'] CSS selector does not apply to default-type text inputs?
The CSS uses only the data in the DOM tree, which has little to do with how the renderer decides what to do with elements with missing attributes.
So either let the CSS reflect the HTML
input:not([type]), input[type="text"]
{
background:red;
}
or make the HTML explicit.
<input name='t1' type='text'/> /* Is Not Red */
If it didn't do that, you'd never be able to distinguish between
element { ...properties... }
and
element[attr] { ...properties... }
because all attributes would always be defined on all elements. (For example, table
always has a border
attribute, with 0
for a default.)
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.
CSS form input[type=text] selector
I don't really get your question. But you have a few options
Will style every input typed text. <input type="text" />
form input[type="text"] {}
Will style the level first only input typed text
form >input[type="text"] {}
Will style the first only input
form input[type="text"]:first-child {}
Will style the input typed text with class "foo"
form input.foo[type="text"] { }
So. Lets say you have a form
<form action="" method="POST">
<input type="text" name="text" class="foo" />
<input type="text" name="text2" class="bar" />
</form>
This will target all inputs
form input[type="text"] { border:2px solid #000000; }
This will target only the first input with the class "foo"
form input.foo[type="text"] { background-color:red; }
This will target the second input with the class "bar"
form input.bar[type="text"] { background-color:green; }
Click here to view on CodePen
Detect if an input has text in it using CSS -- on a page I am visiting and do not control?
Stylish cannot do this because CSS cannot do this. CSS has no (pseudo) selectors for <input>
value(s). See:
- The W3C selector spec
- The Mozilla/Firefox supported selectors
- Cross-browser, CSS3 support table
The :empty
selector refers only to child nodes, not input values.[value=""]
does work; but only for the initial state. This is because a node's value
attribute (that CSS sees), is not the same as the node's value
property (Changed by the user or DOM javascript, and submitted as form data).
Unless you care only about the initial state, you must use a userscript or Greasemonkey script. Fortunately this is not hard. The following script will work in Chrome, or Firefox with Greasemonkey or Scriptish installed, or in any browser that supports userscripts (i.e. most browsers, except IE).
See a demo of the limits of CSS plus the javascript solution at this jsBin page.
// ==UserScript==
// @name _Dynamically style inputs based on whether they are blank.
// @include http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
introduced in GM 1.0. It restores the sandbox.
*/
var inpsToMonitor = document.querySelectorAll (
"form[name='JustCSS'] input[name^='inp']"
);
for (var J = inpsToMonitor.length - 1; J >= 0; --J) {
inpsToMonitor[J].addEventListener ("change", adjustStyling, false);
inpsToMonitor[J].addEventListener ("keyup", adjustStyling, false);
inpsToMonitor[J].addEventListener ("focus", adjustStyling, false);
inpsToMonitor[J].addEventListener ("blur", adjustStyling, false);
inpsToMonitor[J].addEventListener ("mousedown", adjustStyling, false);
//-- Initial update. note that IE support is NOT needed.
var evt = document.createEvent ("HTMLEvents");
evt.initEvent ("change", false, true);
inpsToMonitor[J].dispatchEvent (evt);
}
function adjustStyling (zEvent) {
var inpVal = zEvent.target.value;
if (inpVal && inpVal.replace (/^\s+|\s+$/g, "") )
zEvent.target.style.background = "lime";
else
zEvent.target.style.background = "inherit";
}
CSS Input Type Selectors - Possible to have an or or not syntax?
CSS3 has a pseudo-class called :not()
input:not([type='checkbox']) {
visibility: hidden;
}
<p>If <code>:not()</code> is supported, you'll only see the checkbox.</p>
<ul>
<li>text: (<input type="text">)</li>
<li>password (<input type="password">)</li>
<li>checkbox (<input type="checkbox">)</li>
</ul>
How to add css for specific input type text
Use the ID selector.
CSS:
input{
background-repeat:repeat-x;
border: 0px solid;
height:25px;
width:125px;
}
#firstname{
background-image:url('images/fieldBG.gif');
}
#lastname{
background-image:url('images/fieldBG2222.gif');
}
HTML:
<input type="text" ID="firstname" name="firstName" />
<input type="text" ID="lastname" name="lastName" />
All your inputs will be styled with the generic input style, and the two special ones will have the styling specified by the ID selector.
Is it possible to use an input value attribute as a CSS selector?
Dynamic Values (oh no! D;)
As npup explains in his answer, a simple css rule will only target the attribute value
which means that this doesn't cover the actual value of the html node.
JAVASCRIPT TO THE RESCUE!
- Ugly workaround: http://jsfiddle.net/QmvHL/
Original Answer
Yes it's very possible, using css attribute selectors you can reference input's by their value in this sort of fashion:
input[value="United States"] { color: #F90; }
• jsFiddle example
from the reference
[att] Match when the element sets the "att" attribute, whatever the
value of the attribute.[att=val] Match when the element's "att"
attribute value is exactly "val".[att~=val] Represents an element
with the att attribute whose value is a white space-separated list of
words, one of which is exactly "val". If "val" contains white space,
it will never represent anything (since the words are separated by
spaces). If "val" is the empty string, it will never represent
anything either.[att|=val] Represents an element with the att
attribute, its value either being exactly "val" or beginning with
"val" immediately followed by "-" (U+002D). This is primarily intended
to allow language subcode matches (e.g., the hreflang attribute on the
a element in HTML) as described in BCP 47 ([BCP47]) or its successor.
For lang (or xml:lang) language subcode matching, please see the :lang
pseudo-class.
- css attribute selectors reference
Css pseudo classes input:not(disabled)not:[type=submit]:focus
Instead of:
input:not(disabled)not:[type="submit"]:focus {}
Use:
input:not([disabled]):not([type="submit"]):focus {}
disabled
is an attribute so it needs the brackets, and you seem to have mixed up/missing colons and parentheses on the :not()
selector.
Demo: http://jsfiddle.net/HSKPx/
One thing to note: I may be wrong, but I don't think disabled
inputs can normally receive focus, so that part may be redundant.
Alternatively, use :enabled
input:enabled:not([type="submit"]):focus { /* styles here */ }
Again, I can't think of a case where disabled input can receive focus, so it seems unnecessary.
:first-of-type selector for input type=text
Despite what their names might suggest, :first-of-type
and :nth-of-type()
do not consider the type
attribute on input
elements, or any other attribute on any other element. It only considers the type of element, which in the case of all your elements is input
. By extension, :first-child
and :nth-child()
consider all children of the same parent when counting. Therefore, neither family of pseudo-classes can be used to solve your problem.
The fact that you're working with input
elements makes this more difficult, due to the nature of form elements having special system default styles that cannot be applied using conventional CSS (or any CSS at all). Whether your problem can be solved depends on what sort of styles you wish to apply to the first two input[type="text"]
elements.
If you're applying styles that won't adversely affect the default styles (such as display: none
), or you don't care about the default styles at all, then using the general sibling combinator ~
like I describe here and here will work (note the use of two ~
combinators, since you're looking to style the first two elements and not just the first one):
input[type="text"] {
/*
* Apply styles to all input[type="text"].
*/
}
input[type="text"] ~ input[type="text"] ~ input[type="text"] {
/*
* Undo or override styles applied in the first rule for any input[type="text"]
* that follows at least two other input[type="text"].
*/
}
Otherwise, if you need to preserve the default styles for subsequent elements, then this technique will not work as you cannot revert the default styles after modifying them. There does not appear to be a solution in that case.
Related Topics
Lato' Font Rendering Odd in Safari, Not in Chrome, or Firefox
How to Create Facebook Style Fixed Status Bar
Ionic 4: Changing Ion-Content Background Does Not Work
How to Position a Dropdown at Cursor Position Inside a Textarea
How to Use HTML5 Now to Create a Website
@Media: If Samsung Galaxy S4 Is 1920X1080
CSS Bootstrap Overrides My Own CSS
Overriding Google Recaptcha CSS to Make It Responsive
What Is a Good CSS Cleanup Tool
CSS Calc Invalid Property Value
CSS Apply Border to a Cloud Shape
What's The Difference Between Line-Height:1.5 and Line-Height:150% in CSS
Rails Bootstrap How to Format Form_For (Width Grid Collapses)