I made the tabs using radio button trick like this
Html
<div class="tabs">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
</div>
then css:
.tabs label {
margin-left: -1px;
border: 1px solid;
padding: 0px 80px 0px 80px;
background: #ddd;
}
.tabs input[type=radio]:checked ~ .tabs label {
background: #fff;
border-bottom: 1px solid #fff;
}
The problem here is the style of label does not change when radio button is chosen. Can anyone help me to explain it, thanks
btw: I run code using IE 8. Does it support checked properties
Check following is the solution. Replace ~ with +.
.tabs label {
margin-left: -1px;
border: 1px solid;
padding: 0px 80px 0px 80px;
background: #ddd;
}
input[type="radio"]:checked + label {
background: #fff;
border-bottom: 1px solid #fff;
}
<div class="tabs">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<input type="radio" id="tab-2" name="tab-group-1"/>
<label for="tab-2">Tab Two</label>
</div>
Remove the tilde (~) sign and replace with + and the .tabs
.tabs input[type=radio]:checked + label {
You could also make a jQuery approach:
$('.tabs input[type="radio"]').click(function() {
if($('#tab-1').is(':checked')) {
$('#tab-1').addClass("someClass")
}
});
Related
I've created this custom radio selector for my site and the first radio selector is working but the 2nd field isn't selecting. Is there another class that I need to create or have each input named a different ID so they don't conflict with one another? I'm trying to create multiple options for a customer to select an option.
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
}
input[type=radio]:checked+label {
color: #fff;
background: #444;
border-radius: 5px;
}
label+input[type=radio]+label {
border-left: solid 3px #444;
}
.radio-group {
display: inline-block;
overflow: hidden;
}
<div class="radio-group">
<input type="radio" id="lessthan6months" name="timeline"><label for="lessthan6months">6 mo</label>
<input type="radio" id="6to12months" name="timeline"><label for="6to12months">6-12 mo</label>
<input type="radio" id="12to24months" name="timeline"><label for="12to24months">12-24 mo</label>
<div class="line"></div>
</div>
<div class="radio-group">
<input type="radio" id="tradein_y" name="tradein" value="Yes"><label for="trade in yes">Yes</label>
<input type="radio" id="tradein_n" name="tradein" value="No"><label for="trade in no">No</label>
<div class="line"></div>
</div>
The for of the label content has to match the id of the input.
This will work, like this:
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
}
input[type=radio]:checked+label {
color: #fff;
background: #444;
border-radius: 5px;
}
label+input[type=radio]+label {
border-left: solid 3px #444;
}
.radio-group {
display: inline-block;
overflow: hidden;
}
<div class="radio-group">
<input type="radio" id="lessthan6months" name="timeline"><label for="lessthan6months">6 mo</label>
<input type="radio" id="6to12months" name="timeline"><label for="6to12months">6-12 mo</label>
<input type="radio" id="12to24months" name="timeline"><label for="12to24months">12-24 mo</label>
<div class="line"></div>
</div>
<div class="radio-group">
<input type="radio" id="tradein_y" name="tradein" value="Yes"><label for="tradein_y">Yes</label>
<input type="radio" id="tradein_n" name="tradein" value="No"><label for="tradein_n">No</label>
<div class="line"></div>
</div>
react.js
<div className='check'>
<input
type='checkbox'
className='checkbox'
id='termschkbx'
// style={{backgroundColor: "#DE1F48", color: "#30333F"}}
checked={this.state.isChecked}
// onClick={this.isClicked}
onChange= {this.isChecked}
>
</input>
<span>I agree to Terms & Conditions.<a href="" className='readme'>Read here</a> </span>
</div>
style.css
.checkbox{
top: -2px;
left:-45px;
width: 21px;
height: 21px;
opacity: 1;
display: inline-block;
margin-left:12px;
position: absolute;
}
.checkbox::after{
background: #DE1F48;
color: #30333F;
}
.checkbox:checked{
background: #DE1F48;
color: #30333F;
}
.checkbox input[type=checkbox]:checked {
background: #DE1F48;
color: #30333F;
}
nothing reflects on my checkbox after it is clicked. what can be done?
I even tried inline styling. That didn't work as well.
i did research about this, there were a lot of similar questions about this but nothing worked for me. I'm a new coder so excuseme if this is silly
Use input[type="checkbox"]:checked. This selects checkboxes that are checked.
Here's how to use it:
If the snippet is unavailable, use this JSFiddle link.
input[type=checkbox] {
height:0px;
width:0px;
}
input[type=checkbox]::after {
height:12px;
width:12px;
content:"\00a0\00a0\00a0\00a0";
border:1px solid black;
}
/* The magic below */
input[type=checkbox]:checked::after {
height:12px;
width:12px;
background-color:cyan;
content:"✓";
border:1px solid black;
}
<input type="checkbox" id="first" />
<label for="first" id="first">Here! A Checkbox!</label>
It also works for radio buttons:
input[type="radio"] {
width:0px;
height:0px;
}
input[type="radio"]::after {
content:"\00a0\00a0\00a0\00a0";
border-radius:5px;
height:10px;
width:10px;
position:absolute;
border:1px solid black;
display:inline;
}
input[type="radio"]:checked::after {
content:"✓";
background-color:#00ffff;
}
<div>
<input type="radio" name="radio" id="one" />
<label for="one">Option 1</label>
</div>
<hr>
<div>
<input type="radio" name="radio" id="two" />
<label for="two">Option 2</label>
</div>
<hr>
<div>
<input type="radio" name="radio" id="three" />
<label for="three">Option 3</label>
</div>
I have given focus and active property to input but it doesn't work. After the selection of any color, it doesn't highlight. Hover property is working though.
Below is the code I used to show highlight property for color.
.highlightC:focus,
.highlightC:focus-visible,
.highlightC:visited {
border: 2px solid orange!important;
}
.highlightC:hover,
.highlightC:active {
border: 2px solid white;
}
.highlightC {
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
border: 2px solid transparent;
}
.color1 {
background-color: red;
}
.color2 {
background-color: green;
}
.color3 {
background-color: blue;
}
<div class="text-left mt-2">
<p class="tpColorsHeading ">Available colors</p>
<input type="radio" id="1" name="color" value="1" class="">
<label for="1" class="dot color1 highlightC"></label>
<input type="radio" id="2" name="color" value="2" class="">
<label for="2" class="dot color2 highlightC"></label>
<input type="radio" id="3" name="color" value="3" class="">
<label for="3" class="dot color3 highlightC"></label>
</div>
Your issue is that you check the label for :active status. That status only works for Elements like Links.
I commented the Code where i made changes
also see the following links to help you understand why you have to access it this way and why your attempt didnt get any results:
How to style radio-buttons
operators to affect other elements(the + operator in my example)
/*active is only working for links, not label elements*/
.highlightC:hover {
border: 2px solid white;
}
/*you can style the border by checking the status of the input, + as an oeprator affects the next following label after clicking any radio button in this case, so it only works if the label comes after the radio-button in your dom*/
.text-left input[type="radio"]:checked+label {
border: 2px solid white;
}
/*what are you trying to achieve with this? Visited also only works for links*/
.highlightC:focus,
.highlightC:focus-visible,
.highlightC:visited {
border: 2px solid orange!important;
}
.highlightC {
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
border: 2px solid transparent;
}
.color1 {
background-color: red;
}
.color2 {
background-color: green;
}
.color3 {
background-color: blue;
}
<div class="text-left mt-2">
<p class="tpColorsHeading ">Available colors</p>
<input type="radio" id="1" name="color" value="1" class="">
<label for="1" class="dot color1 highlightC"></label>
<input type="radio" id="2" name="color" value="2" class="">
<label for="2" class="dot color2 highlightC"></label>
<input type="radio" id="3" name="color" value="3" class="">
<label for="3" class="dot color3 highlightC"></label>
</div>
You could use the :checked pseudo class selector in combination with the + adjacent sibling combinator:
.color-input {
display: none;
}
.color-input:checked + .color-label {
border-color: orange;
}
.color-label {
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
border: 2px solid transparent;
}
.color-label--red {
background-color: red;
}
.color-label--green {
background-color: green;
}
.color-label--blue {
background-color: blue;
}
<fieldset>
<legend>Available colors</legend>
<input type="radio" id="1" name="color" value="1" class="color-input">
<label for="1" class="color-label color-label--red"></label>
<input type="radio" id="2" name="color" value="2" class="color-input">
<label for="2" class="color-label color-label--green"></label>
<input type="radio" id="3" name="color" value="3" class="color-input">
<label for="3" class="color-label color-label--blue"></label>
</fieldset>
I think you need to make CSS for checked radio button.
This is the solution for the issue you are facing now:
input[type="radio"] {
display: none;
}
.highlightC {
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
margin: 3px;
box-shadow: 0px 0px 0px 2px transparent;
}
input[type="radio"]:checked+.highlightC {
box-shadow: 0px 0px 0px 2px darkorange;
}
.color1 {
background-color: red;
}
.color2 {
background-color: green;
}
.color3 {
background-color: blue;
}
<div class="text-left mt-2">
<p class="tpColorsHeading ">Available colors</p>
<input type="radio" id="1" name="color" value="1" class="">
<label for="1" class="dot color1 highlightC"></label>
<input type="radio" id="2" name="color" value="2" class="">
<label for="2" class="dot color2 highlightC"></label>
<input type="radio" id="3" name="color" value="3" class="">
<label for="3" class="dot color3 highlightC"></label>
</div>
Yuo have to insert the css class name (highlightC) in the property class="" like this:
class="highlightC"
I am trying to make custom radio button and I want to overlap the <input type="radio" into div.
input[type="radio"]:checked+div {
color: #fff;
background-color: rgb(13, 50, 218);
}
<input type="radio" name="favorite_pet" value="Parrot">
<div>Parrot</div><br>
<input type="radio" name="favorite_pet" value="Dog">
<div>Dog</div><br>
The main goal is to select by text div instead of radio button.
Current Layout:
Expected Layout:
How can I select the div instead of radio button with overlapping?
You should use a label with for and hide the radio button
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
color: #fff;
background-color: rgb(13, 50, 218);
}
<input type="radio" name="favorite_pet" value="Parrot" id="rb1">
<label for="rb1">Parrot</label><br>
<input type="radio" name="favorite_pet" value="Dog" id="rb2">
<label for="rb2">Dog</label><br>
If you have issues giving them ids, you can wrap the whole thing in a label and use another element for the text like a span.
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + span {
color: #fff;
background-color: rgb(13, 50, 218);
}
<label>
<input type="radio" name="favorite_pet" value="Parrot">
<span>Parrot</span>
</label><br>
<label>
<input type="radio" name="favorite_pet" value="Dog">
<span>Dog</span>
</label><br>
Wrap the text in label elements:
input[type="radio"]:checked+span {
color: #fff;
background-color: rgb(13, 50, 218);
}
input {
display: none;
}
span {
display: block;
}
<label><input type="radio" name="favorite_pet" value="Parrot">
<span>Parrot</span></label><br>
<label><input type="radio" name="favorite_pet" value="Dog">
<span>Dog</span></label><br>
Then change your divs to spans since the divs can't exist in labels.
Wrap input inside label.
label, span{
font-family: sans-serif;
display: block;
margin-bottom: 10px;
font-size: 18px;
}
input[type="radio"] {
position: absolute;
visibility: hidden;
}
input[type="radio"]:checked + span{
background: blue;
color: #fff;
}
input[type="radio"] + span:before {
content: '\2610';
margin-right: 10px;
font-size: 20px;
}
input[type="radio"]:checked + span:before {
content: '\2611';
}
<label>
<input type="radio" name="group">
<span>Parrot</span>
</label>
<label>
<input type="radio" name="group">
<span>Dog</span>
</label>
What I need to do is to replace the look of the radio button with image. That can be easily achieved with jQuery, but it this case I need to do it with CSS only. Is there any way to do that? Here is my HTML:
<div class="radio-buttons">
<div class="holder">
<span></span>
<input type="radio" class="radio" id="cheetah" value="" />
</div>
<div class="holder">
<span></span>
<input type="radio" class="radio" id="horse" value="" />
</div>
<div class="holder">
<span></span>
<input type="radio" class="radio" id="lion" value="" />
</div>
</div>
I've tried to apply a style background-image: on the radio button, but of course it didn't work. Then I added the <span>'s and I am wonderig if I can set style to the buttons display: none , and somehow on input:checked to display the <span> which will be styled with background-image: ? Is this the right way or I am on completely wrong direction? And can it be achieved with CSS only at all ?
Edit: the radio buttons might be changed to checkboxes if needed.
As Dominik said that is almost the way to achieve this. May be his code is for a specific case, and I found something similar but much simple than that. I had to make list of photos, and on click of a photo, it must display the clicked photo, but larger and in section after the list. That's why it didn't work with me. But I will first explain everything and then I will paste my code.
The Dominic code will work only if the label is next to the radio-button. It didn't work for me because I have my <label>'s separated from the radio-buttons. Labels are in <ul> and the radio-buttons are in <div> after the <ul>. That way it doesn't work and that's why I needed to add another same <label> next to each radio-button. Now I had two labels for 1 radio button. So here is my entire code. I had styled the ul labels inline just to save some space in the css. I made it with bg-color so if someone want to try ... it works fine with bg-image too
HTML:
<div class="shell">
<form>
<ul>
<li><label class="label" for="cheetah" style="background-color: white"></label></li>
<li><label class="label" for="horse" style="background-color: yellow"></label></li>
<li><label class="label" for="lion" style="background-color: green"></label></li>
<li><label class="label" for="squirrel" style="background-color: red"></label></li>
<li><label class="label" for="tiger" style="background-color: purple"></label></li>
<li><label class="label" for="bear" style="background-color: black"></label></li>
</ul>
<div class="radio-buttons">
<div class="wrapper">
<input type="radio" name="radio" class="radio" id="cheetah" value="" />
<label class="label" for="cheetah" ></label>
</div>
<div class="wrapper">
<input type="radio" name="radio" class="radio" id="horse" value="" />
<label class="label" for="horse" ></label>
</div>
<div class="wrapper">
<input type="radio" name="radio" class="radio" id="lion" value="" />
<label class="label" for="lion" ></label>
</div>
<div class="wrapper">
<input type="radio" name="radio" class="radio" id="squirrel" value="" />
<label class="label" for="squirrel"></label>
</div>
<div class="wrapper">
<input type="radio" name="radio" class="radio" id="tiger" value="" />
<label class="label" for="tiger"></label>
</div>
<div class="wrapper">
<input type="radio" name="radio" class="radio" id="bear" value="" />
<label class="label" for="bear" ></label>
</div>
</div>
</form>
</div>
CSS:
*{ margin: 0; padding: 0; }
.shell { width: 1000px; margin: 0 auto; }
ul { height: 150px; list-style: none; padding-bottom: 50px; }
ul li {
float: left;
border: 1px solid #666;
margin-right: 14px;
}
ul li label {
display: block;
width: 150px;
height: 150px;
cursor: pointer;
}
ul label {
display: inline;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label.label {
border: 1px solid red;
background-repeat: no-repeat;
display: inline-block;
height: 500px;
width: 500px;
}
input[type="radio"]:checked + label[for="cheetah"] {
background-color: white
}
input[type="radio"]:checked + label[for="horse"] {
background-color: yellow
}
input[type="radio"]:checked + label[for="lion"] {
background-color: green
}
input[type="radio"]:checked + label[for="squirrel"] {
background-color: blue
}
input[type="radio"]:checked + label[for="tiger"] {
background-color: purple
}
input[type="radio"]:checked + label[for="bear"] {
background-color: black
}
As described in the Link I provided in the comment, you can use the following html:
<input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-1"></label><br />
<input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-2"></label><br />
together with the css similar to:
.regular-radio {
display: none;
}
.regular-radio + label {
-webkit-appearance: none;
background-image: url("unchecked.png");
padding: 9px;
border-radius: 50px;
display: inline-block;
position: relative;
}
.regular-radio:checked + label:after {
content: ' ';
width: 12px;
height: 12px;
border-radius: 50px;
position: absolute;
top: 3px;
background-image: url("checked.png");
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
text-shadow: 0px;
left: 3px;
font-size: 32px;
}
.regular-radio:checked + label {
background-image: url("checked.png");
border: 1px solid #adb8c0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}
Block-level HTML elements have a few restrictions:
They must be separated from surrounding text by blank lines.
The begin and end tags of the outermost block element must not be indented.
Markdown can't be used within HTML blocks.