This site:
http://proto.io/freebies/onoff/
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
The issue with this is the labels seem to require the use of the for attribute and the checkboxes require an id. Obviously with a form of many checkboxes this could prove quite annoying to have to create unqiue id's all the time. I altered it slightly (the css is on the fiddle), but does anyone know if there is a reason the checkbox was originally placed outside the label and not within? It seems to work fine within..
http://jsfiddle.net/UJw4F/
<div class="onoffswitch">
<label class="onoffswitch-label">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" checked="checked"/>
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
This other guy has done the same with placing the checkbox outside the label:
http://cssdeck.com/labs/radio-buttons-clean
w3.org - Any input element descendant of a label element with a for attribute must have an ID value that matches that for attribute
Without the 'for' attribute
You can do
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" checked="checked"/>
<label class="onoffswitch-label">My Label</label>
And the label will be associated with the checkbox
Follow me #mickjguy
Related
I have a checkbox and a label for it, and within a label there is an input box. When I write something in input box, I don't expect checkbox to toggle (enable/disable). On Chrome and Firefox it works fine, but on Safari selecting input within label also toggles the checkbox.
How can I prevent this from happening?
Here is my code:
<div>
<input type="checkbox" name="xyz" id="xyz">
<label for="xyz">
<input type="number" name="qty" id="qty">This is my label for xyz checkbox, Click on Qty should not enable/disable the checkbox
</label>
</div>
The best solution is probably to move <input type="number"> outside <label>.
Example:
<div>
<input type="checkbox" name="xyz" id="xyz">
<p>
<input type="number" name="qty" id="qty">
<label for="xyz">
This is my label for xyz checkbox, Click on Qty should not enable/disable the checkbox
</label>
</p>
</div>
Remember that all form elements should have a corresponding label.
Read more about labels:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
I suspect malformed HTML that is being fixed by Chrome/Firefox for you, but not fixed correctly in Safari. You should inspect the div in the debugger in each browser and see what each DOM gives you to be sure.
You have:
<div>
<input type="checkbox" name="xyz" id="xyz">
<label for="xyz">
<input type="number" name="qty" id="qty">This is my label for xyz checkbox, Click on Qty should not enable/disable the checkbox
</label>
</div>
You could do this instead with the same intent:
<div>
<input type="checkbox" name="xyz" id="xyz">
<label for="xyz">
This is my label for xyz checkbox
<input type="number" name="qty" id="qty"/>
</label>
</div>
I would like to know how to include a require for different element like checkbox, select ... not alone but inside a group element
I tried this, but it doesn't seem to work as expected
<div class="form-group aria-required="true">
<div class="radio">
<ul class="list-unstyled">
<li>
<input type="radio" name="radio1">
<input type="radio" name="radio2">
<input type="radio" name="radio3">
</li>
</ul>
</div>
</div>
The aria-required attribute is used to indicate that user input is required on an element before a form can be submitted. This attribute can be used with any typical HTML form element; it is not limited to elements that have an ARIA role assigned.
HTML5 now has the required attribute, but aria-required is still useful for user agents that do not yet support HTML5.
Used in ARIA roles
Combobox
Gridcell
Listbox
Radiogroup
Spinbutton
Textbox
Tree
A simple form
<form action="post">
<label for="firstName">First name:</label>
<input id="firstName" type="text" aria-required="true" />
<br/>
<label for="lastName">Last name:</label>
<input id="lastName" type="text" aria-required="true" />
<br/>
<label for="streetAddress">Street address:</label>
<input id="streetAddress" type="text" />
</form>
Working Examples:
Link
I was trying to do this with jquery (How do I get javascript to run more than once?) but some people said it can be done easier with CSS. Right now I have JS that dynamically adds and removes the ez-selected class as seen below whenever a radio button is selected. This is used to replace the buttons with images.
Is there any way to use CSS so that when the ez-selected class is added, it turns the text in the span tag to bold and then removes the bold when the ez-selected class is removed? I cannot change the HTML structure as it's coded in my shopping cart software. Thanks!
EDIT: Is there any kind of CSS selector that can style the span closest to the input checked? I know with + it can select an element right after another element, but is there a way to just select the next span element after a checked radio button even if that span is in another div?
<div class="row">
<input name="TXT870" type="hidden" value="Option 1">
<div class="col-xs-2">
<div class="ez-radio (ez-selected)">
<input class="clearBorder ez-hide" name="CAG3" onclick=
"javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
type="radio" value="870_625_0_625">
</div><input name="CAG3QF1" type="hidden" value="0">
</div>
<div class="col-xs-7">
<span>Option 1</span> <input class="transparentField" name=
"CAG3TX1" readonly size="14" type="text" value=" - Add $5.00">
</div>
</div>
The .ez-selected div is not a previous sibling or parent of the span...so NO...you can't.
Not with this structure
<div class="row">
<input name="TXT870" type="hidden" value="Option 1">
<div class="col-xs-2">
<div class="ez-radio ez-selected">
<input class="clearBorder ez-hide" name="CAG3" onclick=
"javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
type="radio" value="870_625_0_625">
</div><input name="CAG3QF1" type="hidden" value="0">
</div>
<div class="col-xs-7">
<span>Option 1</span> <input class="transparentField" name=
"CAG3TX1" readonly size="14" type="text" value=" - Add $5.00">
</div>
</div>
You would have to travel up the DOM first and you can't do that with CSS because there is no parent selector
I have the following scenario using Bootstrap.
The problem is that when I change the visibility of the first checkbox, it kinda breaks the spacing of the layout.
<label for="">Filter</label>
<div class="checkbox">
<label>
<input type="checkbox"> Filter 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Filter 2
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Filter 3
</label>
</div>
You can test in this CodePen it by clicking on the button.
Did I build badly the HTML? Or am I missing some feature here
The margin-top for .checkbox+.checkbox is set for -5px, this rule applies, regardless of if the first checkbox is visible or not. Better solution would be to add the margin to the text above (which should be no label!) and don't set different margins for the different checkbox-classes.
<p>Filter</p>
<ul class="checkbox list-unstyled">
<li> <label> <input type="checkbox"> Filter 1</label> </li>
<li> <label> <input type="checkbox"> Filter 2</label> </li>
</ul>
You would need to change your JS to $(".checkbox li").first().toggleClass('hidden')
I do the following at <div class="offset3 span6"> with bootstrap-responsive.css:
<div class="control-group">
<label class="control-label" for="passport1">Series and passport number</label>
<div class="controls">
<input type="text" class="input-small inline" id="passport1" placeholder="" maxlength="4">
<input type="text" class="input-medium inline" id="passport2" placeholder="" maxlength="6">
<p class="help-block">Please input your passport details into two fields above</div>
</div>
</div>
But text label is not aligned with input fields (it is lower). How to fix it?
demo
You have a top padding on your label of 5px;
Consider overriding this inline or creating a more specific css selector and try again.