input {
position: absolute;
left: -9999px;
}
input + label {
border-right: solid 1px #000;
padding-right: 8px;
margin-right: 8px;
}
input:checked + label {
display: none;
}
<input type="radio" id="one" name="option" checked/>
<label for="one">One</label>
<input type="radio" id="two" name="option" />
<label for="two">Two</label>
<input type="radio" id="three" name="option" />
<label for="three">Three</label>
There are three options, when the option is selected, it should be hidden, including the border line between the option and the next option.
For example,
When I select "One", I should see "Two | Three".
When I select "Two", I should see "One | Three".
When I select "Three", I should see "One | Two".
It does not necessary to be radio buttons, any other possible solutions are also welcome, but I want to achieve this by using CSS only.
Try the CSS selector :last-of-type. It's just, using CSS, you ~might~ have to give up that last border line in general.
code updated below
input {
position: absolute;
left: -9999px;
}
/*input:first-of-type + label {
border-right: solid 1px #000;
padding-right: 4px;
margin-right: 4px;
}*/
input:not(:first-of-type) + label {
border-left: solid 1px #000;
padding-left: 8px;
margin-left: 8px;
}
input:checked + label {
display: none;
}
/*label:not(:checked):last-of-type {
border-right: none;
}*/
<html>
<input type="radio" id="one" name="option" />
<label for="one">One</label>
<input type="radio" id="two" name="option" />
<label for="two">Two</label>
<input type="radio" id="three" name="option" />
<label for="three">Three</label>
<input type="radio" id="four" name="option" checked/>
<label for="four">Four</label>
<input type="radio" id="five" name="option" />
<label for="five">Five</label>
</html>
Related
I am trying to fix checkbox with tickmarks and radio with periods.
toggling content:"" on unchecked state and content:"\2714" checked state I am getting a flicker. So I made color transparent. Is that correct?
The tick mark doesn't fit exactly to the box. How can alter only that tickmark?
If the sentence is split into lines, the square and text fall on the same margin. What should I do if both should be in seperate blocks?
The period (.) on the radio button, is tiny enough to be visible. If I increase the font-size it misaligns with the text.
I have copied bootstrap CSS and HTML format too.
Here is my jsfiddle link.
https://jsfiddle.net/488s5e70/2/
input[type="radio"],
input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
outline: none;
}
input[type="checkbox"]+span:before {
width: 16px;
height: 16px;
border: 1px solid #000;
content: "\2714";
color: transparent;
display: inline-block;
font-size: 13px;
margin-right: 5px;
text-align: center;
}
input[type="checkbox"]:disabled+span {
color: #ddd;
}
input[type="checkbox"]:checked+span:before {
content: "\2714";
color: #000;
}
input[type="checkbox"]:disabled:checked+span:before {
content: "\2714";
color: #ddd;
}
input[type="checkbox"]:disabled+span:before {
border: 1px solid #ddd;
}
input[type="radio"]+span:before {
width: 16px;
height: 16px;
border: 1px solid #000;
content: ".";
color: transparent;
display: inline-block;
font-size: 13px;
font-weight: bold;
margin-right: 5px;
border-radius: 8px;
text-align: center;
}
input[type="radio"]:disabled+span {
color: #ddd;
}
input[type="radio"]:checked+span:before {
content: "\00b7";
color: #000;
}
input[type="radio"]:disabled:checked+span:before {
content: "\00b7";
color: #ddd;
}
input[type="radio"]:disabled+span:before {
border: 1px solid #ddd;
}
<div class="container">
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span>Option one is this and that—be sure to include why it's greatOption one is this and that—be sure to include why it's greatOption one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" disabled>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" disabled checked>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
<span>Option one is this and that—be sure to include why it's great</span>
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
<label>
<input type="radio" name="optionsRadios2" id="optionsRadios1" value="option1" disabled>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
<label>
<input type="radio" name="optionsRadios2" id="optionsRadios1" value="option1" checked disabled>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
</div>
Transparency instead content ""
its right way! its even better. every thing is OK
fitting the tick mark
when its about a font, there is no warranty about a same and true display in all browsers, i just prefer a background image for check box, a png image
if you have mobile side users, note that all contents inside your elements (tick and ball) probably got change
plain text replaced with android emoticons
seperate blocks
A table with only 2 column could be fastest solution.
Radio
use another character, my offering is "●" or "•"
however the best way is background-image
input[type="radio"]:checked+span:before{
content:"\25CF"; /* or any better character */
color:#000;
}
Right, some things I would change to fix this.
Flexbox, Flexbox everywhere.
Why use a period, when we can use a BLACK CIRCLE
You can find different shapes here if you type "(Hex value)" as the content in you before it will appear.
Here's what I've done.
input[type="radio"],
input[type="checkbox"] {
position: relative;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
outline: none;
}
input[type="checkbox"]+span:before {
width: 16px;
height: 16px;
border: 1px solid #000;
content: "\2714";
color: transparent;
display: inline-block;
font-size: 13px;
margin-right: 5px;
text-align: center;
/* new code notice me! */
display: inline-flex;
align-items: center;
justify-content: center;
}
input[type="checkbox"]:disabled+span {
color: #ddd;
}
input[type="checkbox"]:checked+span:before {
content: "\2714";
color: #000;
}
input[type="checkbox"]:disabled:checked+span:before {
content: "\2714";
color: #ddd;
}
input[type="checkbox"]:disabled+span:before {
border: 1px solid #ddd;
}
input[type="radio"]+span:before {
width: 16px;
height: 16px;
border: 1px solid #000;
content: ".";
color: transparent;
display: inline-block;
font-size: 13px;
font-weight: bold;
margin-right: 5px;
border-radius: 8px;
text-align: center;
/* new code notice me! */
display: inline-flex;
align-items: center;
justify-content: center;
}
input[type="radio"]:disabled+span {
color: #ddd;
}
/* \25cf is the code for BLACK CIRCLE */
input[type="radio"]:checked+span:before {
content: "\25cf";
color: #000;
}
input[type="radio"]:disabled:checked+span:before {
content: "\25cf";
color: #ddd;
}
input[type="radio"]:disabled+span:before {
border: 1px solid #ddd;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span>Option one is this and that—be sure to include why it's greatOption one is this and that—be sure to include why it's greatOption one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" disabled>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" disabled checked>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
<span>Option one is this and that—be sure to include why it's great</span>
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
<label>
<input type="radio" name="optionsRadios2" id="optionsRadios1" value="option1" disabled>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
<label>
<input type="radio" name="optionsRadios2" id="optionsRadios1" value="option1" checked disabled>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
</div>
The flexbox lines are;
display: inline-flex;
align-items: center;
justify-content: center;
They mean;
- things inside me should use flexbox,
- they should be centered vertically,
- they should be centered horizontally.
I hope you find this helpful :-)
I've seen some tricks to change the background color (or other css attributes) on a group of radio buttons. Here is some html
<div class="myclass col-xs-3">
<input type="radio" name="mygroup" value="one" data-bind="checked: SelectedAttributeValueId" />
</div>
<div class="myclass col-xs-3">
<input type="radio" name="mygroup" value="two" data-bind="checked: SelectedAttributeValueId" />
</div>
<div class="myclass col-xs-3">
<input type="radio" name="mygroup" value="three" data-bind="checked: SelectedAttributeValueId" />
</div>
I've tried things like:
.myclass input[type="radio"]:checked{
background-color:#f2f2f2;
}
and
.myclass :checked{
background-color:#f2f2f2;
}
here is a fiddle link. I am using knockout, so maybe this is the tool I should use to style the <div> elements?
All input is appreciated, I would prefer not to use jquery or javscript here (although knockout is okay)
It is not possible to style the radio buttons circle.
However, you can use pseudo-elements (in this case :before) to render a box around the radio button, then style it in CSS.
input[type="radio"] {
display: inline-block;
position: relative;
width: 25%;
margin: 0;
}
input[type="radio"]:before {
content: '';
position: absolute;
z-index: -1;
top: -.5em;
right: 0;
bottom: -.5em;
left: 0;
border: 1px solid black;
background-color: #0073ae;
}
input[type="radio"]:checked:before {
background-color: #f2f2f2;
}
<input type="radio" name="mygroup" value="one" /><input
type="radio" name="mygroup" value="two" /><input
type="radio" name="mygroup" value="three"/>
Here's a solution via jquery.
$('[type=radio]').click(function(){
if($(this).val() == "one") {
$('.myclass').css("background-color", "yellow");
}
//...two...three
});
Hello I want to have for every radio-button other image not for all button's same image.
How would I do that? I tried it on many ways but none has worked yet..
My code with only 1 img for all radio-button is:
<head>
<style>
input[type=radio]:before {
display: block;
width: 50px;
height: 50px;
content: '';
position: absolute;
background-image: url(img.png);
background-size: 50px 50px;
pointer-events: none;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
input[type=radio]:checked:before {
background-image: url(img.png);
border:2px solid #3e6cd4;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.radiostyle {
display:inline-block;
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<input type="radio" name="radio1" class="radiostyle" value="1">
<input type="radio" name="radio1" class="radiostyle" value="2">
<input type="radio" name="radio1" class="radiostyle" value="3">
</body>
Thanks for help!
You can use additional CSS selectory, otherwise add seperate classes or id's:
input[type="radio"][value="1"]:before {
background-image: url(img1.png);
}
input[type="radio"][value="1"]:checked:before {
background-image: url(img1.png);
}
input[type="radio"][value="2"]:before {
background-image: url(img2.png);
}
input[type="radio"][value="2"]:checked:before {
background-image: url(img2.png);
}
input[type="radio"][value="3"]:before {
background-image: url(img3.png);
}
input[type="radio"][value="3"]:checked:before {
background-image: url(img3.png);
}
I think you should add a class name for every option item, after your initial declarations, for example:
input[type=radio].button1:before {
background-image: url(img2.png);
}
input[type=radio].button1:checked:before {
background-image: url(img3.png);
}
[...]
And in your code you should use:
<input type="radio" name="radio1" class="radiostyle button1" value="1">
<input type="radio" name="radio1" class="radiostyle button2" value="2">
<input type="radio" name="radio1" class="radiostyle button3" value="3">
Just add another class having different property for image. JsFiddle Link Demo
For example :
.first_image:checked:before { border:2px solid blue; }
.second_image:checked:before { border:2px solid green; }
.third_image:checked:before { border:2px solid red; }
<input type="radio" name="radio1" class="radiostyle first_image " value="1">
<input type="radio" name="radio1" class="radiostyle second_image " value="2">
<input type="radio" name="radio1" class="radiostyle third_image" value="3">
I've been trying to make custom radio buttons work. I had been using check boxes but found that I needed to restrict the checked options to one. I've been looking at examples/tutorials that I found using Google and thought I understood enough for a simple set of 4 radio buttons but ...
They display correctly initially with the first button checked but checking on other buttons just displays the checked PNG: a previously checked button does not revert to unchecked state.
The buttons are arranged sequentially horizontally in their own div.
HTML
<div class='radio'>
<input id='B12' type='radio' class='radiobutton' checked>
<label id='lblB12' class='radiobutton-label' for='B12'>IR </label>
<input id='BBW' type='radio' class='radiobutton' >
<label id='lblBBW' class='radiobutton-label' for='BBW'>Wide</label>
<input id='B10' type='radio' class='radiobutton' >
<label id='lblB10' class='radiobutton-label' for='B10'>B10</label>
<input id='B8' type='radio' class='radiobutton' >
<label id='lblB8' class='radiobutton-label' for='B8'>B8 </label>
</div>
CSS3
.radiobutton-label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 15px;
}
input[type="radio"] {
display: none;
margin: 10px;
}
.radiobutton-label:before {
content:"";
display: inline-block;
width: 24px;
height: 24px;
margin-right: 10px;
position: absolute;
left: 0;
bottombottom: 1px;
background: url(resources/CheckBoxUnchecked.png) left top;
}
input[type=radio]: + label:before {
background: url(resources/CheckBoxUnchecked.png) left top;
}
input[type=radio]:checked + label:before {
background: url(resources/CheckBoxOK.png) left top;
}
This is the first web page that I have attempted.
Relevant Spec - 17 Forms / 17.2.1 Control types
Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive: when one is switched "on", all others with the same name are switched "off".
Therefore if you want the radio elements to be mutually exclusive, just give them all the same name attribute. In this instance, I just used name="checkboxes".
Updated HTML EXAMPLE HERE
<div class='radio'>
<input id='B12' type='radio' class='radiobutton' name="checkboxes" checked="checked"/>
<label id='lblB12' class='radiobutton-label' for='B12'>IR </label>
<input id='BBW' type='radio' class='radiobutton' name="checkboxes"/>
<label id='lblBBW' class='radiobutton-label' for='BBW'>Wide</label>
<input id='B10' type='radio' class='radiobutton' name="checkboxes"/>
<label id='lblB10' class='radiobutton-label' for='B10'>B10</label>
<input id='B8' type='radio' class='radiobutton' name="checkboxes"/>
<label id='lblB8' class='radiobutton-label' for='B8'>B8 </label>
</div>
Base CSS:
input[type=radio] + label:before {
background: url('http://www.csscheckbox.com/checkboxes/vlad.png') 2px 4px no-repeat;
}
input[type=radio]:checked + label:before {
background: url('http://www.csscheckbox.com/checkboxes/vlad.png') 2px -18px no-repeat;
}
Every time I hover over the label of a checkbox it turns yellow:
Markup
<input type="checkbox" value="hello" id="hello" name="deletefiles[]"/>
<label for="hello">hello</label>
CSS
label:hover, label:active {
background:yellow;
}
When I hover over the related checkbox, I want the label to highlight. Is there a way to fire the same hover rule using CSS if I hover over the checkbox as well? Or will I have to use JavaScript for this...?
You can use a CSS sibling selector, like this:
label:hover, label:active, input:hover+label, input:active+label {
background:yellow;
}
Note that this won't work in IE6.
Just put the checkbox inside the label:
<label for="hello">
<input type="checkbox" value="hello" id="hello" name="deletefiles[]"/>
hello
</label>
Now when you hover over the checkbox, you'll also be hovering over the label, and your existing rules will suffice to highlight it.
The jQuery solution:
$(document).ready(function(){
$('#hello, label[for="hello"]').hover(function(){$(this).addClass('.hover');},
function(){$(this).removeClass('.hover');});
});
...
.hover
{
background-color: yellow;
}
And this DOES work in IE6.
/*CSS*/
/*-------------------------------------------------*/
input:not(:checked) + label:hover{
color: #d51e22;
cursor: pointer;
background-color: #bbb;
}
input:checked + label[for="tab1"],
input:checked + label[for="tab2"],
input:checked + label[for="tab3"],
input:checked + label[for="tab4"]{
color: #d51e22;
text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
background-color: #000;
}
label[for="tab1"],[for="tab2"],[for="tab3"],[for="tab4"] {
width:24%;
display: inline-block;
margin: 0 0 -1px;
padding: 25px 25px;
font-weight: 600;
font-size:24px;
text-align: center;
border-radius:15px;
background-color: #d51e22;
color: #fff;
/*border: 1px solid transparent;*/
}
/*HTML*/
/*-------------------------------------------------*/
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Text here</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Text here</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Text here</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">Text here</label>