I'm trying to style the first legend element within nested fieldsets, but none of the CSS selectors I used achieve what I'm after.
http://codepen.io/anon/pen/epodxd
I basically want to style the first legend element without using any additional CSS class if possible.
<fieldset class="nested-parent">
<legend>Parent</legend>
<input type="text" size="10" />
<fieldset>
<legend>Child</legend>
<input type="text" size="20" />
</fieldset>
</fieldset>
.nested-parent legend:first-child {
color: red;
}
Based on the HTML you provided, you could use the child selector, > in order to select the first legend element that is a direct child of the .nested-parent element:
.nested-parent > legend:first-child {
color: #f00;
}
I would suggest using the :first-of-type pseudo class instead though. It will be more accurate when dealing with the element's types.
Example Here
.nested-parent > legend:first-of-type {
color: #f00;
}
Related
Ciao, I have this element here:
<div class="uk-form-row">
<div class="md-input-wrapper md-input-filled md-input-focus">
<label>Label</label>
<input type="text" class="md-input">
<span class="md-input-bar"></span>
</div>
</div>
This is from a material design theme (Altair Admin v2) so the element once the page is loaded does this:
As you can see the label is moving around (but maybe is not a big deal).
With other elements, if they are empty (invalid) I can underline them or change their color using css:
input:invalid::-webkit-input-placeholder{
color: #e53935 !important;
}
But being this a label BEFORE the input I don't know how I can select it with CSS. How do I turn the LABEL into a different color if the input is invalid?
There is a simpler way to get this done. The :valid and :invalid pseudo-classes will automatically bubble up to a parent <fieldset>. Here is the reference.
You can take advantage of this fact to style your label like so:
<fieldset>
<label>Label</label>
<input type="text" />
</fieldset>
Then in your CSS
fieldset:invalid > label:first-of-type {
color: #e53935 !important;
}
So if your input is :invalid it will invalidate your fieldset, which you can then reference to style your label.
Look at CSS code (simplified to illustrate my point):
.md-input-wrapper {
position: relative;
}
.md-input-wrapper > label {
position: absolute;
top: 16px;
left: 4px;
right: 0;
}
Label is positioned absolutely relative to wrapper, so you can put label element after input element in HTML:
<div class="md-input-wrapper">
<input type="text" class="md-input">
<span class="md-input-bar"></span>
<label>Label</label>
</div>
After that, you can use General sibling combinator to select label of invalid input:
input:invalid ~ label {
color: red;
}
I want to find out if it is possible to target both neighboring elements using the middle one?
for example:
<div>
<span class="icon">icon</span>
<input id="input" class="input error" type="text" />
<label for="input"></label>
<div>
When the input has the error class I want to target the label and the span to have the color red.
I managed to make the label red with the following:
input.error ~ label {
color: red;
}
However I've had no luck with the span. Can somebody maybe tell me if this is possible? and if so please help.
You can use flexbox with the order property to re-order the elements visually, while having the input as the first element in the DOM so you can use the general sibling selector.
div {
display: flex;
}
.icon {
order: -1;
}
input.error ~ * {
color: red;
}
<div>
<input id="input" class="input error" type="text">
<span class="icon">icon</span>
<label for="input">label</label>
<div>
I used jquery .siblings() to target the span and add a class to it.
I want to find out if it is possible to target both neighboring
elements using the middle one?
You can use the axe selector % to target both neighbouring elements.
Since there is no shared class or element type between .icon and label, you'll need to declare:
input.error % .icon,
input.error % label {
color: red;
}
Alternatively, (in this case) you might combine the CSS immediate subsequent sibling selector + and the axe immediate previous sibling selector ?:
input.error ? .icon,
input.error + label {
color: red;
}
Pardon me if this question is already answered, but I couldn't find it.
I am trying to put an asterisk after all <input required> elements.
I found that I can style these with the :required selector.
I would like to use the :after pseudoelement to add an asterisk.
My CSS:
*:required:after {
content:"*";
font-size:48px;
color:red;
position:relative;
top:9px;
}
In Opera 30 and Chrome 40, I see this (note that nearly all of these have the required attribute, see code below.):
In Firefox 39, IE 11, and Edge no pseudoelements are displayed.
Why is it that the pseudoelement only displays on the <input type="date"/> and not on any of the other inputs or selects? And, more importantly, how can I make it display on all required elements?
I'm using bootstrap3 and jquery, if that matters.
HTML:
<label>Title
<select name="title" id="title" class="form-control" required> <!-- Trigger Gender here I think... -->
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss">Miss</option>
<option value="Ms.">Ms.</option>
<option value="Dr.">Dr.</option>
<option value="Rev.">Rev.</option>
</select>
</label>
<label>First Name (as on Passport) <input type="text" name="firstName" id="firstName" placeholder="Charles" class="form-control" required/></label>
<label>Last Name (as on Passport) <input type="text" name="lastName" id="lastName" placeholder="Studd" class="form-control" required/></label>
<label>Maiden Name (if applicable) <input type="text" name="maidenName" id="maidenName" class="form-control"/></label>
<label>Other Names <textarea name="aliases" id="aliases" placeholder="C. T. Studd" class="form-control"></textarea></label>
<label>Date of Birth <input type="date" name="birthday" id="birthday" class="form-control" placeholder="12/02/1860" required/></label>
<label>Gender Autofilled
<select name="gender" id="gender" class="form-control" required>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</label>
Note that the spec says: Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification. So this is not invalid behavior.
Pseudo-elements don't work on inputs, because inputs are empty elements. You'll have to put an element after each input, then use the :required pseudo-class and the + combinator to style that.
:after or :before doesn't work on input or img elements. It can be used on container elements e.g. <div></div>
Reference
In your case I suggest you make use of label instead of input elements. Add a class for label elements which has a required input inside. Of course this would need a bit more of work since you have to set the positions correctly.
e.g.
<label class="required-container">
First Name (as on Passport)
<input type="text" name="firstName" id="firstName" placeholder="Charles" class="form-control" required/>
</label>
Your css:
label.required-container:after {
content:"*";
font-size:48px;
color:red;
position:relative;
top:9px;
}
Currently, the spec does not define behavior of pseudoelements with replaced elements, so this is not required to be consistent across browsers or even within browsers apparently.
The reason is that insertion using content makes a replaced element, and replaced replaced elements are not yet defined. From MDN, replaced elements are: external objects whose representation is independent of the CSS. Typical replaced elements are <img>, <object>, <video> or form elements like <textarea> and <input>. Some elements, like <audio> or <canvas> are replaced elements only in specific cases. Objects inserted using the CSS content properties are anonymous replaced elements.
Until an indeterminate future draft, the best bet is either to use the *:required+:after selector with an empty span (or whatever) or use :required pseudoclass with something that can be used with a replaced element, like a background-image.
We can hope that the current behavior of -webkit- in replacing content:'' after type='date' points toward allowing pseudoelements on all elements. We'll see.
One way to influence what is displayed "in the" input based on one of the input's attributes is to simply place a span or any other suitable element after the input. Then, it is just simple linking via adjacent selector.
Fiddle: http://jsfiddle.net/hvzjf002/.
HTML:
<label>
<input type = "text" required/><span></span>
</label>
CSS:
label {
display: inline-block;
position: relative;
}
label > input {
height: 25px;
font: normal 14px/25px Sans-Serif;
padding: 0 25px 0 10px;
border-radius: 5px;
border: 1px solid #aaa;
outline: 0;
}
label > input:required + span:before {
content:"\f069";
font: normal 14px/1 "Font Awesome";
color: red;
position: absolute;
bottom: 50%;
right: 5px;
transform: translateY(50%);
}
I have a button and I would like to change the css when someone focuses on the input field.
html body form div#composite-field input[type=email]:focus ~ html body form div#composite-field input[type=submit] {
color: #ffffff;
background-color: #2e4e67;
}
HTML:
<form method='post' class="animate" autocomplete="off">
<div id="composite-field">
<input type='email' class='animate' value='' placeholder='Е-mail Адреса'>
<input type='submit' class='animate' value='>'>
</div>
</form>
As far as I've looked up online, I have the selector setup properly. But for some reason it isn't working.
I'd appreciate another set of eyes to help identify the problem?
Thanks
~ is a general sibling combinator. Thus, the elements have to be siblings in order for it to be selected.
Based on the HTML you provided, use the following:
Example Here
form div#composite-field input[type=email]:focus ~ input[type=submit] {
color: #ffffff;
background-color: #2e4e67;
}
You already narrowed the selector down to the #composite-field element. After the combinator, ~, you would just specify the sibling element you are trying to select. You were trying to select a sibling html element, and then select the input[type=submit] element within it. Since it isn't a sibling of input[type=email], nothing was selected.
I'm developing a MVC3 application and need to select the checkboxes label.
In ASP MVC3 you have helper methods which creat a part of the code. So the code for a checkbox looks like this:
<input id="Jumping_successleicht" type="checkbox" value="true" name="Jumping_successleicht">
<input type="hidden" value="false" name="Jumping_successleicht">
<label for="Jumping_successleicht">
<span>leicht (4)</span>
</label>
Now I've thought I can use following code to select the label:
input[type=checkbox] + label {
background: url("../../Images/Controls/Checkbox.png") no-repeat scroll left center transparent;
clear: none;
cursor: pointer;
margin: 0;
padding: 5px 0 4px 24px;
}
But it does not work. It looks like label and input have to be next to each other.
Does any ony have a solution how to solve this problem?
There is no CSS selector that can be used to select the target of a <label for="#"> element universally. The + selector is the "adjacent sibling" selector.
There are a few workarounds:
Put the <input> element directly within the <label> element (you won't need the for="" attribute, that way).
Seeing as each <input /> needs to have a unique id="" attribute set in order to use <label for="">, just select the checkboxes by their IDs in the stylesheet.
Assign classes for each of the appropriate inputs.
Create wrappers around each input and its label.
Maybe you can try this?
input[type="checkbox"] + label{
background-color:red;
}