I have used label for with both input textboxes:
<label for="Username">Username</label>
<input id="Username" type="text" value="">
and checkboxes/radioboxes
<label for="Live">System is Live</label>
<input id="Live" name="Live" type="checkbox" value="false">
The trouble I have is how do I specify different css for the labels for different input types.
If I do a generic label css:
label {
color: #00a8c3;
line-height: 20px;
padding: 2px;
display: block;
float: left;
width: 160px;
}
I find I either end up with unaligned checkboxes or badly positioned textboxes.
You could add classes to the labels. For example:
<label for="Username" class="textbox-label">Username</label>
<input id="Username" type="text" value="">
<label for="Live" class="checkbox-label">System is Live</label>
<input id="Live" name="Live" type="checkbox" value="false">
Then use the class values in CSS:
label.textbox-label {
/*some styles here*/
}
label.checkbox-label {
/*some styles here*/
}
Alternatively, if you had the labels after the inputs, you could select like this:
input[type="text"] + label {
/*some styles here*/
}
input[type="checkbox"] + label {
/*some styles here*/
}
You could write css selector like this will work:
label[for=Username]{ /* ...definitions here... / }
label[for=Live] { / ...definitions here... */ }
You could write your css selector like this:
label[for=Username]
label[for=Live]
You may also have a look at this thread:
CSS Selector for selecting an element that comes BEFORE another element?
Related
I'm new to CSS and I will appreciate any help.
I'm trying to style the asterisk * inside the span element of a required element based on the input:valid property.
<input value="someValue" id="firstnameId" required />
<label class="lbStyle" for="FirstName">
First Name
<span class="ddff" style="color:red;">*</span>
</label>
I tried to do :
input:valid .ddff {
color: palegreen;
}
But it's not working.
I want to change the color of the * from red to green if the input is valid or keep it red otherwise.
How can I achieve it using CSS?
Thanks!
your css is inline, try with !important
input:valid + label .ddff {
color: palegreen !important;
}
<input value="someValue" id="firstnameId" required />
<label class="lbStyle" for="FirstName"> First Name
<span class="ddff" style="color:red;">*</span>
</label>
You can use :valid and :invalid selector for form elements with limitation such as required.
Try this:
input[required]:invalid + label:after{content:"*";color:red}
input[required]:valid + label:after{content:"*";color:green}
<input placeholder="Placeholder" required />
<label> First Name</label>
it can works because .ddff is not an input child
<input value="someValue" id="firstnameId" required />
<label class="lbStyle" for="FirstName"> First Name
<span class="ddff">*</span>
</label>
.ddff{
color: red;
}
input:valid + label .ddff {
color: green;
}
input:invalid +label .ddff {
color: red;
}
Your CSS selector is not correct, you have to use the Adjacent sibling combinator:
input + label .ddff {
color: red;
}
input:valid + label .ddff {
color: palegreen;
}
<input value="someValue" id="firstnameId" required />
<label class="lbStyle" for="FirstName">
First Name
<span class="ddff">*</span>
</label>
can you please try:
CSS:
input:valid + label span.ddff {
color: palegreen !important;
}
Note: You can use an inline CSS. please overwrite your CSS.
I hate css, I really do. I think this one will be trivial for most of you so please help me with this one.
I would like to create a radiobutton which have to change the background color of the label it's in. Here's the code which obviously does not work:
js:
<div className="container">
<label className="check" htmlFor="id">
<input {...radio.input} name="radio" type="radio" id="id" />
</label>
</div>
and css:
.check {
background-color: green;
display: inline-block;
height: 34px;
position: relative;
width: 60px;
cursor: pointer;
}
.check input {
display:none;
}
input[type="radio"]:checked + .check {
background-color: blue;
}
.container {
margin: 0 auto;
}
The + selector in CSS selects the next element in the HTML. Doing input + label is not going to work because your input is wrapped in the label.
The easiest solution for this would be to apply a checked CSS class in react when the input is checked. The other option would be to place the label AFTER the input in your markup, but that will probably require you to apply more CSS to get the appearance you need.
I really love CSS, I really do! ;)
Change your HTML to:
<div className="container">
<input {...radio.input} name="radio" type="radio" id="id" />
<label className="check" htmlFor="id">
</label>
</div>
and style the radio button individually.
I have a big problem.
My task is to design a custom form on a custom page in a CMS (JTL). I am using a plugin to create this form. The problem is that the labels are in front of the checkboxes. This results in a very bad layout. I cannot change the position of the label in the HTML code and therefore have to use CSS since I am not allowed to use JS.
This is basically the HTML:
<li>Question<br/>
<label for="option1">Option 1</label><input id="option1" type="checkbox" /><br/>
<label for="option2">Option 2</label><input id="option2" type="checkbox" /><br/>
<label for="option3">Option 3</label><input id="option3" type="checkbox" /></li>
It doesn't really matter if the CSS gets huge since my task is to make it look good at any cost (just no rearranging HTML and not using JS).
You can use the float property on the input.
Since the checkbox is coming after the label, the float will affect the next element, so don't forget to clear the floating using clear, otherwise it will messup your visual!
input[type="checkbox"] {
float: left;
clear: both;
}
<label for="option1">Option 1</label><input id="option1" type="checkbox" /><br/>
<label for="option2">Option 2</label><input id="option2" type="checkbox" /><br/>
<label for="option3">Option 3</label><input id="option3" type="checkbox" />
You can float the <label>s right and then add a fixed width to each <li>
http://jsfiddle.net/ctkhyoy7/
You can add a float: left property to the checkboxes.
CSS:
input {
float: left;
}
Jsfiddle: http://jsfiddle.net/yzeLpgj0/
You can change it like this in your css http://jsfiddle.net/2ynyb4aL/
label{
position:absolute;
margin-left:20px;
}
This should help you alot : http://www.webcredible.com/blog-reports/css/css-forms.shtml?
OR try use :
<style type="text/css">
label {
display: block;
padding-left: 15px;
text-indent: -15px;
}
input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}
</style>
I would like the labels for my form elements to be greyed out if the input is disabled and am not able to get it to work for text inputs. I have tried the following:
input:disabled {
background:#dddddd;
}
input:disabled+label{color:#ccc;}
<input type='checkbox' disabled id='check1'>
<label for='check1'>Check</label>
<br>
<label for='text1'>Text</label>
<input type='text' id='text1' disabled>
Js Fiddle
The styling works for the checkbox label, but not the text label. Are checkboxes the only input types that let you style their labels via css?
I testing with Firefox.
Based on the comment made by #andi:
input:disabled+label means that the label is immediately AFTER the input. In your HTML, the label comes BEFORE the text input. (but there's no CSS for "before".)
He's absolutely right. But that shouldn't stop us being able to solve the problem with a little trickery!
First step: swap the HTML elements order so that the <label> appears after the <input>. This will allow the styling rules to work as desired.
Then for the fun bit: use CSS to position the labels for text inputs on the left hand side!
input:disabled {
background: #dddddd;
}
input:disabled+label {
color: #ccc;
}
input[type=text]+label {
float: left;
}
<input type="checkbox" disabled="disabled" id="check1">
<label for="check1">Check</label>
<br />
<input type="text" id="text1" disabled="disabled">
<label for="text1">Text</label>
<br />
<input type="checkbox" id="check2">
<label for="check2">Check</label>
<br />
<input type="text" id="text2">
<label for="text2">Text</label>
This selector input:disabled+label{color:#ccc;} targets label elements that are placed after an input element that is disabled
In this snippet the label is after a disabled input, so the label element is gray
<input type='checkbox' disabled id='check1'>
<label for='check1'>Check</label>
In this case, the label is before the input so the selector does not apply to it
<label for='text1'>Text</label>
<input type='text' id='text1' disabled>
Possible solution would be to wrap your elements in an extra div and apply a class name to the div, something like this
<div class='disabled'>
<input type='checkbox' disabled id='check1'>
<label for='check1'>Check</label>
</div>
<div class='disabled'>
<label for='text1'>Text</label>
<input type='text' id='text1' disabled>
</div>
And then you can write your css like this
.disabled label {
color: #ccc;
}
You can use atribute selectors in CSS, example https://jsfiddle.net/8pp6mpp5/1/
Html
<label disabled="disabled">Hola Mundo!</label></br>
<label>Hola Mundo!</label>`
CSS
label[disabled="disabled"]{
background-color: #AAA;
}
You can also use floats and always put the label after the input Demo
You will have to wrap it in a span (or any other element really).
HTML :
<span>
<input type='checkbox' disabled id='check1'>
<label for='check1'>Check</label>
</span>
<br>
<span>
<input type='text1' id='text1' disabled>
<label for='check'>Text</label>
</span>
CSS :
span {
display: inline-block;
overflow: hidden;
}
input {
float: right;
}
label {
float: left;
}
input:disabled {
background:#dddddd;
}
input + label {
float: none;
}
input:disabled + label {
color:#ccc;
}
I had the same issue: make a read-only input EXACTLY like label, I add a set of css styles to the input to get to that goal:
<input readonly class="inputLikeLabel" value="${myBean.property}"></input>
And in CSS:
.inputLikeLabel {
background-color: #ffffff;
text-align: center;
border: none;
cursor: none;
pointer-events: none;
}
By the css style, the input has a white background with no border, no mouse cursor and no click event...similar to label by the end !
If you want to leave your labels before your inputs and lighten your label, you can use the :has pseudo-class and ~ sibling selector:
label:has(~ :is([disabled],[readonly])) {
color: rgba(0,0,0,0.54); /* or opacity: .5; */
}
I want to add a style to a radio button's selected label:
HTML:
<div class="radio-toolbar">
<label><input type="radio" value="all" checked>All</label>
<label><input type="radio" value="false">Open</label>
<label><input type="radio" value="true">Archived</label>
</div>
CSS
.radio-toolbar input[type="radio"] {display:none;}
.radio-toolbar label {
background:Red;
border:1px solid green;
padding:2px 10px;
}
.radio-toolbar label + input[type="radio"]:checked {
background:pink !important;
}
Any ideas what I'm doing wrong?
.radio-toolbar input[type="radio"] {
display: none;
}
.radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
.radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}
<div class="radio-toolbar">
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">All</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Open</label>
<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3">Archived</label>
</div>
First of all, you probably want to add the name attribute on the radio buttons. Otherwise, they are not part of the same group, and multiple radio buttons can be checked.
Also, since I placed the labels as siblings (of the radio buttons), I had to use the id and for attributes to associate them together.
If you really want to put the checkboxes inside the label, try adding an extra span tag, eg.
HTML
<div class="radio-toolbar">
<label><input type="radio" value="all" checked><span>All</span></label>
<label><input type="radio" value="false"><span>Open</span></label>
<label><input type="radio" value="true"><span>Archived</span></label>
</div>
CSS
.radio-toolbar input[type="radio"]:checked ~ * {
background:pink !important;
}
That will set the backgrounds for all siblings of the selected radio button.
You are using an adjacent sibling selector (+) when the elements are not siblings. The label is the parent of the input, not it's sibling.
CSS has no way to select an element based on it's descendents (nor anything that follows it).
You'll need to look to JavaScript to solve this.
Alternatively, rearrange your markup:
<input id="foo"><label for="foo">…</label>
You can add a span to your html and css .
Here's an example from my code ...
HTML ( JSX ):
<input type="radio" name="AMPM" id="radiostyle1" value="AM" checked={this.state.AMPM==="AM"} onChange={this.handleChange}/>
<label for="radiostyle1"><span></span> am </label>
<input type="radio" name="AMPM" id="radiostyle2" value="PM" checked={this.state.AMPM==="PM"} onChange={this.handleChange}/>
<label for="radiostyle2"><span></span> pm </label>
CSS to make standard radio button vanish on screen and superimpose custom button image:
input[type="radio"] {
opacity:0;
}
input[type="radio"] + label {
font-size:1em;
text-transform: uppercase;
color: white ;
cursor: pointer;
margin:auto 15px auto auto;
}
input[type="radio"] + label span {
display:inline-block;
width:30px;
height:10px;
margin:1px 0px 0 -30px;
cursor:pointer;
border-radius: 20%;
}
input[type="radio"] + label span {
background-color: #FFFFFF
}
input[type="radio"]:checked + label span{
background-color: #660006;
}
Just use label:focus-within {} to style a label with a checked radio or checkbox.
Here's an accessible solution
label {
position: relative;
}
label input {
position: absolute;
opacity: 0;
}
label:focus-within {
outline: 1px solid orange;
}
<div class="radio-toolbar">
<label><input type="radio" value="all" checked>All</label>
<label><input type="radio" value="false">Open</label>
<label><input type="radio" value="true">Archived</label>
</div>
As TimStieffenhofer mentioned in their answer, the easiest way is to have the input field as a child of the label and use the :focus-within pseudo-class on the label.
If you want to hide your radio button and set the input to hidden or display none, that will no longer work.
The work around is to give the input field a z-index of -1 (or any z-index lower than the parent label).
As there is currently no CSS solution to style a parent, I use a simple jQuery one here to add a class to a label with checked input inside it.
$(document).on("change","input", function(){
$("label").removeClass("checkedlabel");
if($(this).is(":checked")) $(this).closest("label").addClass("checkedlabel");
});
Don't forget to give the pre-checked input's label the class checkedlabel too