I'm trying to run a hover state for a specific label (not all) that forms a custom radio button by nesting an input field and a span element, like so -
<label>
<input id="sample" name="sample" type="radio" value="sample">
<span></span>
Sample
</label>
The hover state should be that of a cursor pointer change. How would I go about to achieve this? Right now only the span (which is a custom radio button design) gets a pointer cursor. If the user hovers the label text nothing happens.
Why not wrap the text in em, i, etc tags and style with cursor: pointer?
label em {
cursor: pointer;
font-style: normal;
}
<label>
<input id="sample" name="sample" type="radio" value="sample">
<span></span>
<em>Sample</em>
</label>
EDIT - further to comments below, please see the following:
label, label *:not(input) {
cursor: pointer;
font-style: normal;
}
<label>
<input id="sample" name="sample" type="radio" value="sample">
<span></span>
Sample
</label>
Since you can't select actual text nodes with CSS (i.e. - "Sample" in your example), we can use CSS to style the label as a whole and its descendants, but with the exception of the input (:not(input))
Related
I want to have radio input choice done with pushing buttons. (it's where you have several options and you can only choose one, usually done with radio dots) I used
<input id="test"><label for="test">Click Me</label>
To achieve the same effect but with text (when clicked on text radio button sets to checked="true", but no matter how I try to approach it while using HTML buttons I never can get radio input checked with just button and not text clicking. So this and variation of this where you set button as parent with for tag etc. didn't work for me.
<input id="test"><label for="test"><button>Click Me</button></label>
I can use something like addEventListeners to buttons and set the choice in javascript, but thought maybe there is an obvious pure HTML way I just could not figure out. Heres a small pen just for fiddling around - Cheers
Just use your first example and style the label element to look like a button.
Here is a quick example:
label {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
padding: 5px;
}
input {
display: none;
}
input:checked + label {
background: red;
}
<input id="radio1" name="radio" type="radio" />
<label for="radio1">Click me</label>
<input id="radio2" name="radio" type="radio" />
<label for="radio2">Click me</label>
<input id="radio3" name="radio" type="radio" />
<label for="radio3">Click me</label>
My
<input type="radio">
in my form does not line up with my
<text></text>
behind it.
Example of my form
First of all you shouldn't use <text>, as DaFois said. Use <label> instead
label {
display: flex;
}
<label>
<input type="radio">
Label Text
</label>
below is working fine have look , to make it work you have to wrap you radio button in span, than wrap span and text div.
Real magic is you put your input control in span and set style sheet of span to make content center. that will do work for you.
.center {
vertical-align: middle;
display:inline;
}
<div>
<span class="center">
<input type="radio">
</sapn> text of radio
</div>
Working demo at jsfiddle : https://jsfiddle.net/hfu1zaxg/1/
If I have a radio input that is wrapped within a label, how can I target the label when the input is checked?
<div>
<p>Payment Plan:</p>
<label><input name="os0" type="radio" value="monthly">TEST</label>
</div>
I tried:
input:checked + label { color: red }
and
input:checked + label
But none worked, what I am doing wrong? I also tried the > selector.
The reason I have label wrapping the input, is because I NEED the label to be clickable
There's no parent or backward selector in CSS (yet?). Thus, we can't select the wrapper label by the wrapped input.
There are two options:
1) Wrapping the content by an inline wrapper like <span> element, as follows:
<label>
<input name="os0" type="radio" value="monthly">
<span>TEST</span>
</label>
Then select the <span> by using adjacent sibling selector +:
input:checked + span {
color: red
}
WORKING DEMO
2) Using for attribute for the label to target the input by its id attribute as follows:
<input name="os0" type="radio" id="myinput" value="monthly">
<label for="myinput">TEST</label>
And Then select the label by:
input:checked + label {
color: red
}
WORKING DEMO.
Your css will work if you modify your html to this:
<div>
<p>Payment Plan:</p>
<input id="os0" name="os0" type="radio" value="monthly">
<label for="os0">TEST</label>
</div>
Using the for attribute with an id on the input will let you click on the label to affect the button, as it does when wrapped in the element.
http://jsfiddle.net/PMmrk/
Is it possible, with only CSS, to style an HTML label dependent on its input's state?
In my case, I want to style an <input type="checkbox"> based on whether it's checked.
I tried putting the label inside the input, but Firefox and Chrome (at least) seems to parse them as siblings, even though they're clearly nested in the input source. And I don't know how to write a CSS rule that can indirect through a for= attribute.
Do I need to whip out the Javascript on this one?
They don't need to be nested, that's what the "for" attribute is for in the <label> element.
In modern browsers (those supporting CSS 2.1), you can use a sibling selector, such as
input + label {
/* rules */
}
You would have to have your markup in a strict sibling relationship, such as:
<input name="cb" id="cb" type="checkbox"><label for="cb">Checkbox</label>
Using the adjacent/sibling selector plus the attribute selector would make it work:
<form>
<style>
INPUT[checked=checked] + LABEL {
color: #f00;
}
</style>
<div>
<input type="checkbox" id="chk1" />
<label for="chk1">Label #1</label>
</div>
<div>
<input type="checkbox" id="chk2" checked="checked" />
<label for="chk2">Label #2</label>
</div>
</form>
To make this thing work you need to put the label after the input, this goes for text type inputs, so for checkbox you can skip this, unless you want the label before checkbox.
To keep the order for label being shown before the input you need to use Flexbox and reverse order of items, for example like this.
.form-group {
display: flex;
flex-direction: column-reverse;
}
The display: flex; with flex-direction: column-reverse; reorders the divs content.
Now all you need to do is use this to affect your label style.
input:checked + label {
color: #000;
}
And HTML for completeness.
<div class="form-group">
<input type="checkbox" name="rememberPwd" id="rememberPwd" class="form-input" required/>
<label for="rememberPwd">Remember?</label>
</div>
Checkboxes in HTML forms don't have implicit labels with them. Adding an explicit label (some text) next to it doesn't toggle the checkbox.
How do I make a checkbox toggle from clicking on the text label as well?
If you correctly markup your HTML code, there is no need for javascript. The following code will allow the user to click on the label text to tick the checkbox.
<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />
The for attribute on the label element links to the id attribute on the input element and the browser does the rest.
This has been testing to work in:
IE6
IE7
Firefox
Set the CSS display property for the label to be a block element and use that instead of your div - it keeps the semantic meaning of a label while allowing whatever styling you like.
For example:
label {
width: 100px;
height: 100px;
display: block;
background-color: #e0e0ff;
}
<label for="test">
A ticky box! <input type="checkbox" id="test" />
</label>
Ronnie,
If you wanted to enclose the label text and checkbox inside a wrapper element, you could do the following:
<label for="surname">
Surname
<input type="checkbox" name="surname" id="surname" />
</label>
As indicated by #Gatekiller and others, the correct solution is the <label> tag.
Click-in-the-text is nice, but there is another reason to use the <label> tag: accessibility. The tools that visually-impaired people use to access the web need the <label>s to read-out the meaning of checkboxes and radio buttons. Without <label>s, they have to guess based on surrounding text, and they often get it wrong or have to give up.
It is very frustrating to be faced with a form that reads "Please select your shipping method, radio-button1, radio-button2, radio-button3".
Note that web accessibility is a complex topic; <label>s are a necessary step but they are not enough to guarantee accessibility or compliance with government regulations where it applies.
You can wrap your checkbox in the label:
<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
<input type="checkbox" name="surname">
</label>
You need to just wrap the checkbox in label tag just like this
<label style="height: 10px; width: 150px; display: block; ">
[Checkbox Label Here] <input type="checkbox"/>
</label>
FIDDLE
or you can also use the for attribute of label and id of your checkbox like below
<label for="other">Other Details</label>
<input type="checkbox" id="other" />
FIDDLE
this should work:
<script>
function checkbox () {
var check = document.getElementById("myCheck").checked;
var box = document.getElementById("myCheck")
if (check == true) {
box.checked = false;
}
else if (check == false) {
box.checked = true;
}
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>
if it doesnt, pleae corect me!
Wrapping with the label still doesn't allow clicking 'anywhere in the box' - still just on the text!
This does the job for me:
<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>
but unfortunately has lots of javascript that is effectively toggling twice.