I'm trying to do a pure css Show/Hide with radio button.
As seen in below snippet, it works like a charm.
.refusal,
.acceptance {
display: none;
}
input#refusal:checked~.refusal {
display: block;
}
input#acceptance:checked~.acceptance {
display: block;
}
This example works!</br>
<input type="radio" id="refusal" name="status" value="declined">
<label for="refusal">NO</label>
<input type="radio" id="acceptance" name="status" value="accepted">
<label for="acceptance">YES</label>
<form class="refusal">Something for REFUSAL</form>
<form class="acceptance">Something for ACCEPTANCE</form>
The problem is I want to modify my html input/label like this:
<label>
<input type="radio" id="refusal" name="status" value="declined">
NO</label>
However, if I do so, my snippet doesn't work any more (a css selector problem I guess).
But I don't know how to make it work. Thanks.
When you put the input inside a label element you change the level which it resides, so the tilde(~) selector does not work. If you really need the input to be inside a label element you need to use js.
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>
I'm using Twitter Bootstrap and I need two radio buttons, inline, with text on the left. So far afer a couple of pieces of different code I managed to get them inline, the text is on the right though. That's not the main problem anyway - take a look at how the radio buttons look:
On the left there seem to be two radio buttons, one on top of the other. Another thing is that when I choose the second one, the first one still appears chosen.
My questions (the most important on top):
1) How to deal with two radio buttons being chosen at the same time?
2) How to style the radio buttons? I tried background color, border - nothing changes
3) How to put the text to the left from the radio button? Changing its position before and after input doesn't change a thing.
Here's the code:
<form name="searchform">
<input type="text" name="searchterms">
<input type="submit" name="SearchSubmit" value="Search">
<label class="search-radio-text"><input type="radio" name="sex" value="male">Nazwisko</label>
<label class="search-radio-text"><input type="radio" name="sex" value="female">Tytuł</label>
</form>
One solution is to style the labels, after hiding the radio boxes themselves and binding the labels to their radio boxes.
HTML
<form name="searchform">
<input type="text" name="searchterms">
<input type="submit" name="SearchSubmit" value="Search">
<input type="radio" id="radio1" name="sex" value="male">
<label class="search-radio-text" for="radio1">Nazwisko</label>
<input type="radio" id="radio2" name="sex" value="female">
<label class="search-radio-text" for="radio2">Tytuł</label>
</form>
CSS
input[type="radio"] {
display:none;
}
input[type=radio] + label {
display:inline-block;
margin:-2px;
padding: 4px 12px;
background-color: #e7e7e7;
border-color: #ddd;
}
input[type=radio]:checked + label {
background-image: none;
background-color:#99cc33;
}
Demo: http://jsfiddle.net/user2314737/X5gBm/
You can also simulate checkboxes using images like this: http://jsfiddle.net/user2314737/X5gBm/1/
I am trying to show and hide a text field based on whether or not the user clicks a radio button. Is this possible? According to the docs, collapsible content needs a header.
Here is my code with no collapsible content:
<fieldset data-role="controlgroup" data-mini="true">
<input type="radio" name="radio-mini" id="radio-mini-1" value="choice-1" />
<label for="radio-mini-1">No</label>
<input type="radio" name="radio-mini" id="radio-mini-2" value="choice-2" />
<label for="radio-mini-2">Yes</label>
</fieldset>
<label for="textarea-a">Textarea:</label>
<textarea name="textarea" id="textarea-a">
</textarea>
I would like the textarea to be shown if the radio button labeled "Yes" is clicked. Any ideas?
Well, if the radio and the textarea are siblings (and you're using, and happy to be compatible with up-to-date browsers) you could use CSS:
label[for=textarea-a],
#textarea-a {
display: none;
}
#radio-mini-2:checked ~ label[for=textarea-a],
#radio-mini-2:checked ~ #textarea-a {
display: block;
}
JS Fiddle demo.
In the above I removed your radio elements from the fieldset (as the textarea, and its label have to be siblings for this approach to work).
I have a list of checkboxes, each one with a label:
<input type="checkbox" id="patient-birth_city" name="patient-birth_city" />
<label for="patient-birth_city">(_PATIENT_BIRTH_CITY_)</label>
<input type="checkbox" id="patient-birth_state" name="patient-birth_state" />
<label for="patient-birth_state">(_PATIENT_BIRTH_STATE_)</label>
<input type="checkbox" id="patient-birth_country" name="patient-birth_country" />
<label for="patient-birth_country">(_PATIENT_BIRTH_COUNTRY_)</label>
Without using any CSS they are showed in the same line (I suppose they have a default "inline" or "block-inline" display). The problem is I can't modify HTML structure and I need each pair checkbox-label appear in a new line. Like this. Is it possible using only CSS?
The good thing about label tags is you can wrap the input elements:
<label>
<input type="checkbox" id="birth_city" name="birth_city" />
City
</label>
<label>
<input type="checkbox" id="birth_state" name="birth_state" />
State
</label>
<label>
<input type="checkbox" id="birth_country" name="birth_country" />
Country
</label>
And if you add the following CSS:
label {
display: block;
}
It will display it how you want.
Demo here
As you CAN'T edit your HTML, this CSS would work:
input, label {
float: left;
}
input {
clear: both;
}
Demo here
Using float:left and clear:left you can do this with only css.
Demo: http://jsfiddle.net/VW529/2/
input {margin:3px;}
input, label {float:left;}
input {clear:left;}
The only problem is that the example does not show more information of parent elements, giving the container element overflow:hidden and/or clear:both might be needed to prevent floating elements next to the last label. (edited jsfiddle code with container div)
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>