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>
Related
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.
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/
Im having the following html for radio buttons,and I have added the css also
<br/><br/>
<input type="radio" id="radio1" name="radios" value="CC" checked>
<label for="radio1">Credit Card</label>
<br><br>
<br/><br/>
<input type="radio" id="radio2" name="radios"value="DB">
<label for="radio2">Debit Card</label>
<br><br>
its css is
/*
Hide radio button (the round disc)
we will use just the label to create pushbutton effect
*/
input[type=radio] {
display:none;
margin:10px;
}
/*
Change the look'n'feel of labels (which are adjacent to radiobuttons).
Add some margin, padding to label
*/
input[type=radio] + label {
display:inline-block;
margin:-2px;
padding: 4px 12px;
background-color: #e7e7e7;
border-color: #ddd;
}
/*
Change background color for label next to checked radio button
to make it look like highlighted button
*/
input[type=radio]:checked + label {
background-image: none;
background-color:#d0d0d0;
}
but the radio buttons doesnt align in one line
here is the jsfidlle http://jsfiddle.net/8ew6g/3/
heres the link http://jsfiddle.net/8ew6g/9/ [solved]
The radio button is below payment mode label,i have applied some css on it,so it wont look like a basic rabio button
Update:
This resource might also be useful, as it uses similar code and the result is inline.
I would suggest following this advice and then wrapping your code with the title in a fieldset. This will allow you to make a legend, so your code will look like this:
<fieldset>
<legend><strong>Payment Mode- Select your payment mode</strong></legend>
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">Credit Card</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Debit Card</label>
</fieldset>
You will also want to add this to your CSS:
fieldset {
border: none;
}
You can try this:
<table>
<tr>
<td>
<input type="radio" id="radio1" name="radios" value="CC" checked />
<label for="radio1">Credit<nobr/> Card</label>
</td>
<td>
<input type="radio" id="radio2" name="radios" value="DB">
<label for="radio2">Debit<nobr/> Card</label>
</td>
</tr>
</table>
in order to make sure that the line doesn't break between the two words, which happened when I tried it on your Fiddle.
Your HTML is rather muddled, particularly given the div elements tagged as table and row, so I am not quite sure what to make of it. I am hesitant to recommend a table, particularly in light of this, so maybe you should consider if there is something you could do other than using completely fake radio buttons.
Remove the two <Br /> tags you have between the radio buttons
and wrap the radio buttons with <div> and increase its width to about 180px
like:
<div style="width:180px;">
<input type="radio" id="radio1" name="radios" value="CC" checked>
<label for="radio1">Credit Card</label>
<input type="radio" id="radio2" name="radios"value="DB">
<label for="radio2">Debit Card</label>
</div>`
in following jsfiddle, I am trying to change the color of selected radio button for two (or more) different radio groups, by only using CSS. I am missing something i do not know.
http://jsfiddle.net/2nxnk/1/
CODE:
<input type="radio" name="group0" value="1" /> One
<input type="radio" name="group0" value="2" /> Two
<input type="radio" name="group0" value="3" /> Three
<p>
<input type="radio" name="group1" value="4" /> Four
<input type="radio" name="group1" value="5" /> Five
<input type="radio" name="group1" value="6" /> Six
CSS:
input[type="radio"]:checked{ color: green; }
i do not want to use any jquery unless there is no other way. pl advice.
EDIT:
I decided to edit the question: I want to change the color of 'text of radio button'. secondly i did not want to clutter the html page with ID's if the only use is to change text color. My question now is:
1. is using the label only way?
2. seems using IDs you get capability of coloring different radio group (text again) differently. is that correct?
3. finally maybe a simple question: I though only javascript catches the action on the page, when there is no javascript how does CSS triggers the effect?
thx all for help and I also upped the last example which colors the radio button image itself.
If you want to change the text next to the radio button, you can do this way
Html
<input type="radio" name="group0" value="1" /><label>One</label>
<input type="radio" name="group0" value="2" /><label>Two</label>
<input type="radio" name="group0" value="3" /><label>Three</label>
<p>
<input type="radio" name="group1" value="4" /><label>Four</label>
<input type="radio" name="group1" value="5" /><label>Five</label>
<input type="radio" name="group1" value="6" /><label>Six</label>
Css
input[type="radio"]:checked + label {
color: green;
}
Fiddle
Probably pseudo element can help a bit:-
input[type="radio"]:checked +label {
color: green;
}
input[type="radio"]:checked:before
{
content:'.';
position:relative;
display:inline-block;
background-color:green;
width:12px;
opacity:.3;
top:-1px;
border-radius:10px;
-moz-border-radius:10px;
}
Fiddle
In most (if not all) browsers, you cannot change the colour of a radio button at all.
You can only simulate it by replacing the radio button with a different widget and trying to link it to the real radio button so it continues to work. Most implementations of this depend on JavaScript.
If you are looking to change the color of the text if respective radio button is selected, you can use + adjacent selector and wrap the text inside a label tag
input[type="radio"]:checked + label {
color: green;
}
Demo
I've removed other boxes to decrease the clutter, but logic goes same for else
Did you consider making your own radio boxes? Using labels that is
We can make labels act like radio boxes by using the "for" attribute, which then makes it clickable and react to the :checked selector. The best thing about these is a label is a basic HTML element so you can make it look exactly as you intend. Check this relatively plain example:
DEMO
<input type="radio" name="group0" value="1" id="one"/>
<label for="one"><div class="inner"></div></label><span>One</span>
<input type="radio" name="group0" value="2" id="two"/>
<label for="two"><div class="inner"></div></label><span>Two</span>
input {
display: none;
}
span,
label {
display: block;
margin: 10px 10px 10px 0;
float: left;
}
label {
width: 20px;
height: 20px;
background: #ddd;
border-radius: 10px;
}
input:checked + label{
background: green;
}
.inner {
width: 10px;
height: 10px;
margin-top: 4px;
margin-left: 4px;
background: #eee;
border-radius: 5px;
border: 1px solid #aaa;
}
Update
Here is a new fiddle with the actual buttons like I was referring to. Link: jsfiddle
Others have answered how to change the text, which I believe is what you are looking for based on your attempt. But, in the off chance you are looking to change the appearance of the button itself you could use <label for="#id"> and some CSS styling/opacity tricks to replace the buttons with images. Then, change the background color when checked. My example and fiddle use placekittens, but you could substitute the <img> sources with any image you wanted (a colored radio button with 50% opacity for example would allow you to disregard the opacity section of code.) See my code below and this fiddle. You'll have to play with the margin and padding settings to make the background color canvas the entire image, but this should give you an idea.
HTML
<input id="a" type="radio" name="group0" value="1" />
<label for="a"><img src="http://www.placekitten.com/40/40" /></label>
<input id="b" type="radio" name="group0" value="2" />
<label for="b"><img src="http://www.placekitten.com/40/39" /></label>
<input id="c" type="radio" name="group0" value="3" />
<label for="c"><img src="http://www.placekitten.com/39/40" /></label>
<p>
<input id="d" type="radio" name="group1" value="4" />
<label for="d"><img src="http://www.placekitten.com/38/40" /></label>
<input id="e" type="radio" name="group1" value="5" />
<label for="e"><img src="http://www.placekitten.com/40/38" /></label>
<input id="f" type="radio" name="group1" value="6" />
<label for="f"><img src="http://www.placekitten.com/39/38" /></label>
CSS
input {
display: none;
}
input[type="radio"]:checked + label {
background-color: green;
}
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
I'm not sure you can set css like that for a radio button.
BUT! you can set:
-webkit-appearance: none;
appearance: none;
vertical-align: bottom;
background: #fff;
border: 1px solid #dcdcdc;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
Maybe change the background color?
But that's about as much as you can change, sorry.
In case that you are already using Bootstrap (both CSS and JavaScript) you could use class selector active to achieve effect like the one you want.
See this fiddle: https://jsfiddle.net/7k0dbgsa/1/
.active
{
color: green;
}
The fiddle has been forked from https://jsfiddle.net/KyleMit/0nevkwyn/
I have the following HTML:
<input type="radio" name="beds" value="1" />1+
<input type="radio" name="beds" value="2" />2+
How do I change the spacing between the radio button and the "1+" text? I'd like the text to be closer to the radio button, but the browser is inserting a certain amount of undefined padding between the two elements.
Many HTML elements have a default margin setting. You can override this and set it to 0. In your case, you want to reset margin-right on the radio button:
<input type="radio" name="beds" value="1" style="margin-right: 0" />1+
You probably want to add it to your stylesheet so that it applies to all radio buttons:
input[type="radio"] {
margin-right: 0;
}
You'll need the label element.
<input type="radio" name="beds" value="1" id="first" /><label for="first">1+</label>
<input type="radio" name="beds" value="2" id="second" /><label for="second">2+</label>
You can then style this like this:
label {
margin-left: -3px;
}
Also note the use of the for attribute for accessibility purposes.
Just change the input id's width to auto in css.
#input-id {
width: auto;
}
You can add this to your stylesheet:
input[type="radio"] {
margin-right: 10px;
}
First Create id's inside input tag (eg id="input1"), then style id's in css file(eg #input1{margin-left:5px; margin-top:5px;}) also you can use inline styling using margin-top:5px,and margin-left:5px
<input type="radio" name="beds" value="1" id="first" />
<label for="first">
1+
</label>
<input type="radio" name="beds" value="2" id="second" />
<label for="second">
2+
</label>
this is what you have
change your +1 (and +2) to
<h:outputText value ="+1" style="margin-left: -3px"/>
You have to mess with the style of the text you are using as a label, and to do that you need it to be an actual element, not just raw text.