i use disabled attribute for disable/enable elements.but label element has problem with this attribute ,when set this attribute to disabled do not work.
See bellow code & link
<label disabled="disabled" for="ch1">Click to Me</label>
<button disabled="disabled" >Cannot Click to Me</button>
<input type="checkbox" id="ch1" />
http://jsbin.com/wagoku/1/
You can't disable a label per se. Disable the form control it is associated with instead.
<label for="ch1">Click to Me</label>
<input type="checkbox" disabled id="ch1">
http://jsbin.com/pojojike/1/edit?html,output
You can't disable the label use css something like
.disabled {
color: darkgrey;
background-color: grey;
}
And to add the class to your element:
$('#click').addClass('disabled');
Related
Taking an example from the end of https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_build_custom_form_controls:
.select label {
display: none;
}
.select:focus-within label {
display: initial;
}
input:checked + label {
display: initial;
}
<fieldset class="select">
<legend>Pick a fruit</legend>
<input type="radio" name="fruit" value="Cherry" id="fruitCherry" checked>
<label for="fruitCherry">Cherry</label>
<input type="radio" name="fruit" value="Lemon" id="fruitLemon">
<label for="fruitLemon">Lemon</label>
<input type="radio" name="fruit" value="Banana" id="fruitBanana">
<label for="fruitBanana">Banana</label>
</fieldset>
(I have simplified the example to better illustrate the point). Note how you can click on one of the labels, and since focus is inside the select after that, all labels become visible. However, as soon as you try to click on label of another item, the labels disappear before selecting that item, since there is a brief period before the mouse button is released where no element is focused. I assume the the browser only handles the click event when the mouse button is released.
Is there any way to keep the focus while holding down the mouse button as well, without JavaScript? I experienced this on Firefox and Chrome on Linux.
I am also surprised by the fact that it acts differently depending on whether you click-and-hold on the label or the radio button.
By default <label> is not a focusable Element.
When you try to click a label it's as if you're clicking away to remove the focus from what you previously clicked.
In order to make an element focusable we use the tabindex attribute with a negative value so it doesn't interfere with the navigation because our sole purpose is to make the element focusable
.select label {
display: none;
}
.select:focus-within label {
display: initial;
}
input:checked+label {
display: initial;
}
<fieldset class="select">
<legend>Pick a fruit</legend>
<input type="radio" name="fruit" value="Cherry" id="fruitCherry" checked>
<label tabindex="-1" for="fruitCherry">Cherry</label>
<input type="radio" name="fruit" value="Lemon" id="fruitLemon">
<label tabindex="-1" for="fruitLemon">Lemon</label>
<input type="radio" name="fruit" value="Banana" id="fruitBanana">
<label tabindex="-1" for="fruitBanana">Banana</label>
</fieldset>
I'm trying to do a pretty simple checkbox hack in an HTML email to make some basic in-email interactivity.
Something like the following:
<style>
input:checked + div {
text-decoration: line-through;
}
</style>
<label>
<input type="checkbox" style="display:none"/>
<div>A todo item</div>
</label>
Whenever the todo item is clicked, I can apply some styling marking it
done.
But if I make the todo item a link:
<style>
input:checked + a {
text-decoration: line-through;
}
</style>
<label>
<input type="checkbox" style="display:none"/>
Open Google
</label>
The checkbox isn't toggled when the link is clicked.
Here's a codepen to demonstrate.
Is there any way to get the link to open, and the checkbox to toggle? As this is destined for an HTML email, any javascript solution is off the table.
The answer is: you cannot without JS.
That HTML setup makes nested interactive contents. The fact is that the <a> tag receives the click event and that cancels the click on the label. You need some JS! This way the natural behaviour of the checkbox is not altered, i.e. you can un-click:
<style>
input:checked+a {
text-decoration: line-through;
}
</style>
<label for="myInput">
<input id="myInput" type="checkbox" style="display:none"/>
Open Google
</label>
Working Demo
EDIT
As it is for email and you cant use JS, just add a tabindex to a tag and a css. Its the closest you can get without using javascript
Working Demo below:
label {
display: block;
padding: 10px 0;
}
input:checked + div{
text-decoration: line-through;
}
a:focus{
text-decoration: line-through;outline:0;}
<label>
<input type="checkbox" style="display:none"/>
<div>Todo Item</div>
</label>
<label>
<input type="checkbox" style="display:none"/>
<div>Another todo Item</div>
</label>
<label>
<input type="checkbox" style="display:none" id='btnControl'/>
Open Google
</label>
JS
function myFunction() {
document.getElementById("me").style.textDecoration = "line-through";
}
HTML
<label>
<input type="checkbox" style="display:none"/>
<a href="http://www.google.com" id="me" onclick="myFunction()" target="_blank">Open
Google</a>
</label>
I would like to have a form validation with Just HTML5 with Submit button style changes depends on the all the input validation values. ie to display Color of submit button in green if all the input fields are valid /Form is valid .
You can style the submit button based on the form's :valid or :invalid pseudo-class:
form:valid input[type="submit"] {
background-color: #cfc;
color: #060;
}
form:invalid input[type="submit"] {
background-color: #fcc;
color: #600;
}
label {
display: block;
margin: 0.5em 0;
}
<form>
<label>
Serial number:
<input pattern="[A-Za-z]{3}[0-9]{3}" required placeholder="Something like ABC123">
</label>
<label>
<input type="radio" name="radio" value="1" required>
One of these
</label>
<label>
<input type="radio" name="radio" value="2" required>
must be selected
</label>
<input type="submit">
</form>
The only validation that can be done with just HTML is to use the HTML5 'required' attribute which doesn't let a form to be submitted before you do something (click a radio button, fill a text field...).
You can't validate a form to your own likes, and you certainly can't dynamically change elements' CSS properties without JavaScript.
why can't one set a style like the font size in an input tag, e.g.
<input style="font-size:20px" type="radio" name="a" value="a">some text</input>
Shouldn't the font attributes apply?
Secondly, what is the best way to do this then?
Thanks
I think that it's because the CSS you're setting applies to the 'inner' tag of that input.
The thing you want styled is its Value, so you need to wrap your input inside a placeholder and style that.
For example:
<span style="font-size:40px">
<input type="radio" name="a" value="a">some text
<input type="radio" name="a" value="b">some text
</span>
Works as expected.
There's not a lot you can do to style a radio button, however:
<input type="radio" name="radiogroup" id="radio-1">
<label for="radio-1">Radio button 1</label>
you can style the label...
The best way to go about this is providing the style deceleration within an external stylesheet, or perhaps at the top of the document. Inline styles are typically what you want to avoid if at all possible, as it becomes confusing for later changes and can cause really dirty specificity issues.
An example of a fix:
HTMl (example)
<div id="form">
<input type="text" name="name" value="a" />
</div>
CSS (example)
#form input {
font-size: 20px;
}
Hope this helps.
Try the following:
<input type="radio" name="a" value="a"><span style="font-size: 50px;">some text</span></input>
If you wrap the text with a span\p tag you will be able to style the inner text of that tag.
I know this question already has an accepted answer, but I figure it's worth mentioning this:
It may be better to either associate a <label> tag with each radio input (using the for attribute of the label) or wrapping each radio input with a label tag. This lets your user click on the text to select the radio input instead of having to aim for a rather small circle.
So your markup looks like so:
<input type="radio" id="radio1" name="radios" value="something 1" />
<label for="radio1">Something 1</label>
<input type="radio" id="radio2" name="radios" value="something 2" />
<label for="radio2">Something 2</label>
<input type="radio" id="radio3" name="radios" value="something 3" />
<label for="radio3">Something 3</label>
Radio inputs are grouped into mutually exclusive selections by their name, which the group will share. The value specified in the for attribute of the label will match the id attribute of the radio input you want selected. So in the sample above, if you click on the text "Something 1", the radio input that is id'd as radio1 gets selected.
You can then style the text of the label to your heart's content.
This is in regards to the second part of your question,
"Secondly, what is the best way to do this then?"
#input {
background-color: black;
color: green;
text-align: center;
}
<input id="input" value="Value" />
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.