I'm trying to change the colour of radio buttons and button label when the radio button has been selected. Have tried this.
input[type='radio']:checked {
background: yellow !important;
}
<label
className='tag-item'
key={tag}
htmlFor={`filter-${tag}`}
clickable='true'>
<span>{tag}</span>
<input
type='radio'
name='tag'
id={`filter-${tag}`}
value={tag}
checked={tag === currentTag}
onChange={e => setCurrentTag(e.target.value)}
className='tag-radio'
/>
</label>
You can't change the default Radio button's color.
But you can do this with some trick.
input[type=radio]{
display: none;
}
.fake-radio{
position: relative;
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid gray;
border-radius: 100%;
}
.fake-radio::before{
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 6px;
height: 6px;
background-color: gray;
border-radius: 100%;
}
input[type=radio]:checked + .fake-radio{
border-color: red;
}
input[type=radio]:checked + .fake-radio::before{
background-color: red;
}
<label>
<span>Tag</span>
<input type="radio" />
<span class="fake-radio"></span>
</label>
I have an Issue that I tried to set a styled checkbox with a new class, so that this checkbox appears with a different layout than the "original" styled one.
The original looks like this:
<label for="bauherr_check">Bauherr</label>
<input id="bauherr_check" name="zielgruppen_check[]" value="bauherr_check" type="checkbox">
<label class="checkbox" for="bauherr_check">
::before
</label>
The CSS for the "original" code:
input[type=checkbox] {
display:none;
}
.checkbox:before {
content: "";
width: 12px;
height: 12px;
display: flex;
align-items: center;
background-color: #ffffff;
border-top: 1px solid #AAAAAA;
border-left: 1px solid #AAAAAA;
border-radius: 1px;
}
input[type=checkbox]:checked + .checkbox:before {
content: "\2713";
color:black;
font-size: 11pt;
}
The new one has the following code
<label class="label_details" for="sichtbar_check">Sichtbar?</label>
<input class="togglerIn" id="sichtbar_check" name="sockel_check[]" value="sichtbar_check" type="checkbox">
<label class="checkbox_details" for="sichtbar_check">
::before
</label>
The CSS of the new Box:
.checkbox_details:before {
content: "";
width: 12px;
height: 12px;
display: flex;
align-items: center;
background-color: #ffffff;
border-top: 1px solid #AAAAAA;
border-left: 1px solid #AAAAAA;
border-radius: 1px;
margin-left:-5px;
}
input[type=checkbox].check_details:checked + .checkbox_details:before {
content: "\2713";
color:black;
font-size: 11pt;
}
How comes that the second box does not show the check symbol (content) as soon as I check the box? Maybe someone can help? Thanks a lot.
I have found the solution myself... pretty quick though....
I just added a new class to the input field:
<input class="togglerIn" id="sichtbar_check" name="sockel_check[]" value="sichtbar_check" type="checkbox">
And styled the new class the same way than the "orignal" class:
input[type=checkbox]:checked + .checkbox:before, .check_details:checked + .checkbox_details:before {
content: "\2713";
color:black;
font-size: 11pt;
}
This way, the content appears as soon as I check the box.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.checkbox:checked:before {
transform: rotate(-45deg);
height: .5rem;
border-color: #009688;
border-top-style: none;
border-right-style: none;
}
.label-checkbox {
position: relative;
margin: .5rem;
font-family: Arial, sans-serif;
line-height: 135%;
cursor: pointer;
}
.checkbox {
margin: 0 1rem 0 0;
cursor: pointer;
}
.checkbox:before {
content: "";
position: absolute;
z-index: 1;
width: 1rem;
height: 1rem;
top: 0;
border: 2px solid green;
}
.checkbox:checked :before {
height: .5rem;
border-color: green;
border-top-style: none;
border-right-style: none;
}
.checkbox:after {
content: "";
position: absolute;
top: rem(-2);
left: 0;
width: 1.1rem;
height: 1.1rem;
background: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<label class="label-checkbox">
<input type="checkbox" class="checkbox"> Item 4
</label>
</body>
</html>
After following this question and getting the idea of styling which is shown below, I tried to replace the default checkboxes and style them.
Currently, the problem is that the checkboxes don't tick and I don't understand why.
Link to JsFiddle:
Fiddle Link Here
HTML
<div class="col-md-6 checkboxes">
<label for="id_tags_0"><input type="checkbox" name="tags" value="4" id="id_tags_0">
Tag 1</label>
<label for="id_tags_1"><input type="checkbox" name="tags" value="1" id="id_tags_1">
Tag 2</label>
</div>
CSS
.checkboxes label {
/*display: inline-block;*/
cursor: pointer;
position: relative;
}
/*Hide default checkbox*/
.checkboxes input[type=checkbox] { display: none; }
/*Show an empty box before the our label by default*/
.checkboxes label:before {
content: "";
display: inline-block;
margin-right: 10px;
position: absolute;
left: 0;
top: 3px;
background-color: #fff;
border: 2px solid #d0d0d0;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
transition: all 0.25s;
font-family: "FontAwesome";
color: #fff;
text-align: center;
}
/*When checkbox input is checked, add a tick to our box */
.checkboxes label>input[type=checkbox]:checked:before {
/* Content: https://fontawesome.com/icons/check?style=solid */
content: "\f00c";
background-color: #66676b;
border: 2px solid #66676b;
}
.checkboxes label>input[type=checkbox]:checked {
/* Content: https://fontawesome.com/icons/check?style=solid */
content: "\f00c";
background-color: #66676b;
border: 2px solid #66676b;
}
You are trying to use parent selector, which is not possible through css.
Instead you can try this.
add a span after the checkbox and style it.
.checkboxes label {
/*display: inline-block;*/
cursor: pointer;
position: relative;
padding-left: 28px;
margin-right: 20px;
margin-bottom: 0;
line-height: 24px;
font-size: 16px;
}
/*Hide default checkbox*/
.checkboxes input[type=checkbox] { display: none; }
/*Show an empty box before the our label by default*/
.checkboxes label span:before {
content: "";
display: inline-block;
width: 19px;
height: 19px;
margin-right: 10px;
position: absolute;
left: 0;
top: 3px;
background-color: #fff;
border: 2px solid #d0d0d0;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
transition: all 0.25s;
font-family: "FontAwesome";
font-size: 12px;
color: #fff;
text-align: center;
line-height: 15px;
}
/*When checkbox input is checked, add a tick to our box */
.checkboxes label>input[type=checkbox]:checked + span:before {
/* Content: https://fontawesome.com/icons/check?style=solid */
content: "\f00c";
background-color: #66676b;
border: 2px solid #66676b;
}
.checkboxes label>input[type=checkbox]:checked {
/* Content: https://fontawesome.com/icons/check?style=solid */
content: "\f00c";
background-color: #66676b;
border: 2px solid #66676b;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" rel="stylesheet"/>
<div class="col-md-6 checkboxes">
<label for="id_tags_0">
<input type="checkbox" name="tags" value="4" id="id_tags_0">
<span></span>
Tag 1</label>
<label for="id_tags_1"><input type="checkbox" name="tags" value="1" id="id_tags_1">
<span></span>
Tag 2</label>
<label for="id_tags_2"><input type="checkbox" name="tags" value="2" id="id_tags_2">
<span></span>
Tag 3</label>
<label for="id_tags_3"><input type="checkbox" name="tags" value="3" id="id_tags_3">
<span></span>
Tag 4</label>
<label for="id_tags_4"><input type="checkbox" name="tags" value="5" id="id_tags_4">
<span></span>
Tag 5</label>
</div>
I am trying to figure out how to use css to replace all my radio buttons the same way. Is it possible to use css to just make these radio buttons work no matter where the location of the input is? I dont want to to have to adjust for rows or anything. Just by grabbing the radio button and cssing it the way i have in the example below.
body {
background-color: white;
margin: 0;
padding: 0;
}
input[type='radio'] {
display: none;
}
.radio {
border: 1px solid #b3b4b4;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
display: block;
float: left;
height: 16px;
margin: 10px 10px 0 0;
padding: 10px;
position: relative;
width: 16px;
}
.row:hover .radio {
border: 2px solid #218996;
}
input[type='radio']:checked + .radio {
background-color: #218996;
border: 2px solid #218996;
}
input[type='radio']:checked + .radio::before {
content: "✓ ";
position: absolute;
color: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size:
}
.row {
border-bottom: 1px solid #dcdcdc;
padding: 0 5px;
}
.row label {
display: inline-block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
}
.row > label:last-child {
padding: 12px 0;
width: calc(100% - 50px);
cursor: pointer;
}
<form name="titleTypes" id="titleTypes" method="post" action="process.cfm">
<div>
<!---Label is here for placement of error message--->
<label for="rgroup" class="error" style="display:none;">Please choose one.</label>
</div>
<div class='row'>
<input id="one" type="radio" name="rgroup" value="MV/titleTypeMV.cfm" />
<label for="one" class='radio' tabindex='1'></label>
<label for="one">MOTOR VEHICLE / TRAVEL TRAILER TITLE</label>
</div>
<div class='row'>
<input id="two" type="radio" name="rgroup" value="MH/mobileHome.cfm" />
<label for="two" class='radio' tabindex='1'></label>
<label for="two">MOBILE HOME</label>
</div>
<div class='row'>
<input id="three" type="radio" name="rgroup" value="BOAT/boat.cfm" />
<label for="three" class='radio' tabindex='1'></label>
<label for="three">VESSEL</label>
</div>
<div class='row'>
<input id="four" type="radio" name="rgroup" value="DUPL/duplicate.cfm" />
<label for="four" class='radio' tabindex='1'></label>
<label for="four">DUPLICATE</label>
</div>
<div>
<button class="btn-u" type="submit" name="submit" id="submitBtn" class="submitBtn"><i></i>Next</button>
</div>
I want the input radio to be able to just work exactly as these radio buttons whether there on a table or any where just by calling the class. Is this possible to do?
Per our conversation in the comments, I slightly modified your CSS to work outside of the rows they were designed for. Mainly, I added a clear: both; to .radio to put each input on a new line, and added float: left; to both labels so they keep in line.
input[type='radio'] {
clear: both;
float: left;
width: 20px;
height: 10px;
opacity: 0;
}
.radio {
border: 1px solid #b3b4b4;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
display: block;
height: 16px;
margin: 0 10px 10px -20px;
padding: 10px;
position: relative;
width: 16px;
}
input[type='radio']:checked + .radio {
background-color: #218996;
border-color: #218996;
}
input[type='radio']:active + .radio,
input[type='radio']:focus + .radio {
border-color: lightblue;
}
input[type='radio']:checked + .radio::before {
content: "✓ ";
position: absolute;
color: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
label {
float: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 20px;
}
<input id="one" type="radio" name="rgroup" tabindex='1' />
<label for="one" class='radio'></label>
<label for="one">Button 1</label>
<input id="two" type="radio" name="rgroup" tabindex='2' />
<label for="two" class='radio'></label>
<label for="two">Button 2</label>
When you say do it by classes, do you mean you want to be able to toggle from one state to another state without JS/jQ? Here's a demo I did in CSS, which shows how to hook into a radio or checkbox``:checked state.
Added OP's example and fixed the jerky motion when hovered over. This side-effect occurs when a state has more padding, margins, font-size, borders, etc. than it's counterpart. For example, take Snippet 2 as an example.
When hovered over the radio buttons and row would jerk around which is very irritating and distracting. In this case, there were several rulesets that had a border of 1px, while others had 2px. All you have to do is make sure all borders have the same width.
Added inset box-shadow to each radio to give them some depth on hover.
Added box-shadow to each row in order to define them a little.
Added animated borders to each row as well.
SNIPPET 1
html,
body {
box-sizing: border-box;
background: #111;
color: #DDD;
font: 400 16px/1.4'Verdana';
height: 100vh;
width: 100vw;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0 none hlsa(0%, 0, 0, 0);
outline: 0 none hlsa(0%, 0, 0, 0);
}
fieldset {
margin: 0 1em 1em 0;
padding: 8px;
border-radius: 9px;
border: 3px double #FF8;
width: 100%;
max-width: 19em;
}
legend {
font: small-caps 700 1.5rem/2"Palatino Linotype";
color: #FD1;
}
/* CheX */
#chex input.chkrad {
display: none;
}
#chex input.chkrad + label {
color: #DDD;
font-size: 16px;
}
#chex input.chkrad + label span {
display: inline-block;
width: 12px;
height: 12px;
margin: -1px 15px 0 0;
vertical-align: baseline;
cursor: pointer;
}
#chex input + label span {
background: #555;
line-height: 100%;
}
input.X:checked + label span {
padding: -3px 10px 3px;
}
input.X:checked + label span:before {
content: 'X';
color: #F00;
font-family: cursive;
font-style: oblique;
font-weight: 900;
font-size: 20px;
}
/* RadZ */
#radz input.chkrad {
display: none;
}
#radz input.chkrad + label {
color: #EEE;
font-size: 16px;
}
#radz input.chkrad + label span {
display: inline-block;
width: 18px;
height: 18px;
margin: -1px 15px 0 0;
vertical-align: baseline;
cursor: pointer;
}
#radz input + label span {
background: #555;
line-height: 100%;
}
input.A:checked + label span {
padding: -5px 15px 5px;
font-size: 16px;
}
input.A:checked + label span:before {
content: '👊';
color: #e3e;
font-family: cursive;
font-style: normal;
font-weight: 700;
font-size: 24px;
}
input.B:checked + label span {
padding: -5px 15px 5px;
font-size: 16px;
}
input.B:checked + label span:before {
content: '💋';
color: #f99;
font-family: cursive;
font-style: normal;
font-weight: 300;
font-size: 20px;
margin: 0 30px 0 0;
text-align: left;
}
input.C:checked + label span {
padding: -2px 15px 2px;
font-size: 16px;
}
input.C:checked + label span:before {
content: '🍸';
color: #3ef;
font-family: cursive;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: .75;
vertical-align: bottom;
margin-top: 5px;
}
input.D:checked + label span {
padding: -5px 15px 5px;
font-size: 16px;
}
input.D:checked + label span:before {
content: '💀';
color: #eee;
font-family: cursive;
font-style: normal;
font-weight: 100;
font-size: 20px;
line-height: .75;
}
input.fade + label span,
input.fade:checked + label span {
-webkit-transition: background 0.7s linear;
-moz-transition: background 0.7s linear;
transition: background 0.7s linear;
}
.red {
color: red;
}
<fieldset id="chex" name="chex">
<legend><span class="red">X</span> Marks the Checkbox</legend>
<input type='checkbox' name='chk3' id="chk3" class="chkrad X fade" value='x' />
<label for="chk3"><span></span>Red "X" mark</label>
</fieldset>
<fieldset id="radz" name="radz">
<legend>Shore Leave</legend>
<input type='radio' name='rad' id="rad1" class="chkrad A fade" value='1' />
<label for="rad1"><span></span>Brawl</label>
<br/>
<input type='radio' name='rad' id="rad2" class="chkrad B fade" value='2' />
<label for="rad2"><span></span>Women</label>
<br/>
<input type='radio' name='rad' id="rad3" class="chkrad C fade" value='3' />
<label for="rad3"><span></span>Drink</label>
<br/>
<input type='radio' name='rad' id="rad4" class="chkrad D fade" value='4' />
<label for="rad4"><span></span>All of the above, matey!</label>
<br/>
</fieldset>
SNIPPET 2
body {
background-color: white;
margin: 0;
padding: 0;
}
input[type='radio'] {
display: none;
}
.radio {
border: 2px solid #b3b4b4;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
display: table-cell;
float: left;
line-height: 100%;
margin: 10px 10px 0 0;
padding: 10px;
position: relative;
width: 16px;
}
.row:hover .radio {
border: 2px solid #218996;
box-shadow: inset 0 0 10px #218996;
}
input[type='radio']:checked + .radio {
background-color: #218996;
border: 2px solid #218996;
}
input[type='radio']:checked + .radio::before {
content: "✓ ";
position: absolute;
color: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.row {
border-bottom: 2px solid #dcdcdc;
padding: 0 5px;
box-shadow: 0 0 10px rgba(0, 128, 192, .3);
}
.row label {
display: block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-variant: small-caps;
font-weight: bold;
}
.row > label:last-child {
padding: 12px 0;
width: calc(100% - 50px);
cursor: pointer;
}
.btn-u {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-variant: small-caps;
font-weight: bold;
}
.row.bdr {
display: block;
position: relative;
padding-bottom: 1.5px;
}
.row.bdr::before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width 0s ease, background .5s ease;
}
.row.bdr::after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: rgba(51, 112, 44, .4);
transition: width .5s ease;
}
.row.bdr:hover::before {
width: 100%;
background: rgba(100, 177, 255, .4);
transition: width .5s ease;
}
.row.bdr:hover::after {
width: 100%;
background: transparent;
transition: all 0s ease;
}
<form name="titleTypes" id="titleTypes" method="post" action="process.cfm">
<div>
<!---Label is here for placement of error message--->
<label for="rgroup" class="error" style="display:none;">Please choose one.</label>
</div>
<div class='row bdr'>
<input id="one" type="radio" name="rgroup" value="MV/titleTypeMV.cfm" />
<label for="one" class='radio' tabindex='1'></label>
<label for="one">Motor Vehicle / Travel Trailer Title</label>
</div>
<div class='row bdr'>
<input id="two" type="radio" name="rgroup" value="MH/mobileHome.cfm" />
<label for="two" class='radio' tabindex='1'></label>
<label for="two">Moble Home</label>
</div>
<div class='row bdr'>
<input id="three" type="radio" name="rgroup" value="BOAT/boat.cfm" />
<label for="three" class='radio' tabindex='1'></label>
<label for="three">Vessel</label>
</div>
<div class='row bdr'>
<input id="four" type="radio" name="rgroup" value="DUPL/duplicate.cfm" />
<label for="four" class='radio' tabindex='1'></label>
<label for="four">Duplicate</label>
</div>
<div>
<button class="btn-u" type="submit" name="submit" id="submitBtn" class="submitBtn"><i></i>Next</button>
</div>
How can I use custom radio buttons and checkboxes in ZURB Foundation 5? It seems like it was easy in ZURB Foundation 4, but can't get the custom radio and checkbox to work.
I don't know what have you been using before but it can be simply done by custom CSS code without JavaScript like this:
SCSS
input {
&[type=checkbox], &[type=radio] {
opacity: 0;
position: absolute;
&:checked + label:before {
background: $primary-color;
}
& + label:before {
display: inline-block;
text-align: center;
line-height: 1;
border: 0.0625rem solid $primary-color;
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
font-size: 0.875rem;
color: white;
background: white;
}
}
&[type=checkbox] {
& + label:before {
content: "\2715";
padding-right: 1px;
border-radius: 0.125rem;
}
}
&[type=radio] {
& + label:before {
content: "\2713";
border-radius: 50%;
}
}
}
If you don't want to have any character inside checboxes or radio buttons then put whitespace into content attribute:
[...]
content: " ";
[...]
CodePen playground
Compiled CSS + HTML to show working example
input[type=checkbox],
input[type=radio] {
opacity: 0;
position: absolute;
}
input[type=checkbox]:checked + label:before,
input[type=radio]:checked + label:before {
background: #007095;
}
input[type=checkbox] + label:before,
input[type=radio] + label:before {
display: inline-block;
text-align: center;
line-height: 1;
border: 0.0625rem solid #007095;
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
font-size: 0.875rem;
color: white;
background: white;
}
input[type=checkbox] + label:before {
content: "\2715";
padding-right: 1px;
border-radius: 0.125rem;
}
input[type=radio] + label:before {
content: "\2713";
border-radius: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
<div class="small-12 column">
<h3>Radio Button</h3>
<div class="inline">
<input type="radio" name="role" value="admin" id="admin" checked />
<label for="admin">admin</label>
</div>
<div class="inline">
<input type="radio" name="role" value="user" id="user" />
<label for="user">user</label>
</div>
</div>
<div class="small-12 column" style="margin-top: 10px;">
<h3>Checkbox</h3>
<input type="checkbox" id="captcha" checked/>
<label for="captcha" translate>I am human</label>
</div>
</div>
Please add this because it conflicts with the "switch"
input {
...
&.switch-input {
& + label:before {
display: none;
}
}
}