I have an issue with the checkbox checked. I am trying to find a solution that is when my current checkbox is checked to change the opacity others checkbox. is that possible with CSS? I made it with CSS input and label. Here is my code.
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin-bottom: 10px;
display: block;
}
.styled-checkbox {
position: absolute;
opacity: 0;
}
.styled-checkbox:checked + label {
opacity: 1;
}
.styled-checkbox:checked + label label {
opacity: 0.5;
}
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
font-size: 0.875rem;
}
.styled-checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
width: 14px;
height: 14px;
vertical-align: text-top;
border: 1px solid #000;
}
.styled-checkbox:checked + label:after {
content: '';
position: absolute;
left: 1px;
top: 7px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 #000, 4px 0 0 #000, 4px -2px 0 #000, 4px -4px 0 #000, 4px -6px 0 #000, 4px -8px 0 #000;
transform: rotate(45deg);
transition: all 0.3s ease-out;
}
<ul>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-1" />
<label for="styled-checkbox-1">Test one</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-2" />
<label for="styled-checkbox-2">Test Two</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-3" />
<label for="styled-checkbox-3">Test Three</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-4" />
<label for="styled-checkbox-4">Test Four</label>
</li>
</ul>
`
desire goal is something like that
I hope you guys understand the problem. Thanks in advance
Just remove this declaration: .styled-checkbox:checked + label label and add another one .styled-checkbox.inactive + label to set opacity of "inactive" checkboxes.
After the DOM is loaded, get all checkboxes and add a click listener
If no checkbox is checked, remove 'inactive' class from all of them
If at least one checkbox is checked, add the 'inactive' class to all unchecked
window.addEventListener('load', function() {
let checks = document.querySelectorAll('.styled-checkbox');
checks.forEach(function(check) {
check.addEventListener('click', chkStyles);
});
function chkStyles() {
// Verify if there's at least one checkbox checked
let checked = document.querySelectorAll('.styled-checkbox:checked');
if(checked.length == 0) {
// No checked checkbox, remove all inactive
checks.forEach(function(check) { check.classList.remove('inactive'); });
} else {
// At least 1 is checked
checks.forEach(function(check) {
if(check.checked) {
check.classList.remove('inactive');
} else {
check.classList.add('inactive');
}
});
}
}
});
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin-bottom: 10px;
display: block;
}
.styled-checkbox {
position: absolute;
opacity: 0;
}
.styled-checkbox:checked + label {
opacity: 1;
}
.styled-checkbox.inactive + label {
opacity: 0.5;
}
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
font-size: 0.875rem;
}
.styled-checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
width: 14px;
height: 14px;
vertical-align: text-top;
border: 1px solid #000;
}
.styled-checkbox:checked + label:after {
content: '';
position: absolute;
left: 1px;
top: 7px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 #000, 4px 0 0 #000, 4px -2px 0 #000, 4px -4px 0 #000, 4px -6px 0 #000, 4px -8px 0 #000;
transform: rotate(45deg);
transition: all 0.3s ease-out;
}
<ul>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-1" />
<label for="styled-checkbox-1">Test one</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-2" />
<label for="styled-checkbox-2">Test Two</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-3" />
<label for="styled-checkbox-3">Test Three</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="styled-checkbox-4" />
<label for="styled-checkbox-4">Test Four</label>
</li>
</ul>
Related
If I have a radio group with buttons:
... how can I show only images in the select option instead of the buttons, e.g.
Wrap radio and image in <label>
Hide radio button (Don't use display:none or visibility:hidden since such will impact accessibility)
Target the image next to the hidden radio using Adjacent sibling selector +
Don’t forget to provide alternative text in the alt attribute, especially since it functions as the radio button’s label
/* HIDE RADIO */
[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* IMAGE STYLES */
[type=radio] + img {
cursor: pointer;
}
/* CHECKED STYLES */
[type=radio]:checked + img {
outline: 2px solid #f00;
}
<label>
<input type="radio" name="test" value="small" checked>
<img src="https://via.placeholder.com/40x60/0bf/fff&text=A" alt="Option 1">
</label>
<label>
<input type="radio" name="test" value="big">
<img src="https://via.placeholder.com/40x60/b0f/fff&text=B" alt="Option 2">
</label>
Don't forget to add a class to your labels and in CSS use that class instead.
Custom styles and animations
Here's an advanced version using the <i> element and the ::after pseudo-element:
body{color:#444;font:100%/1.4 sans-serif;}
/* CUSTOM RADIO & CHECKBOXES
http://stackoverflow.com/a/17541916/383904 */
.rad,
.ckb{
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.rad > input,
.ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* RADIO & CHECKBOX STYLES */
/* DEFAULT <i> STYLE */
.rad > i,
.ckb > i{
display: inline-block;
vertical-align: middle;
height: 16px;
transition: 0.2s;
box-shadow: inset 0 0 0 8px #fff;
border: 1px solid gray;
background: gray;
}
.rad > i {
width: 16px;
border-radius: 50%;
}
.ckb > i {
width: 25px;
border-radius: 3px;
}
.rad:hover > i{ /* HOVER <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: gray;
}
.rad > input:focus + i { /* FOCUS <i> STYLE */
outline: 1px solid blue;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: orange;
}
/* CHECKBOX */
.ckb > input + i::after{
content: "";
display: block;
height: 12px;
width: 12px;
margin: 2px;
border-radius: inherit;
transition: inherit;
background: gray;
}
.ckb > input:focus + i {
outline: 1px solid blue;
}
.ckb > input:checked + i::after{ /* (RADIO CHECKED) <i> STYLE */
margin-left: 11px;
background: orange;
}
<label class="rad">
<input type="radio" name="rad1" value="a">
<i></i> Radio 1
</label>
<label class="rad">
<input type="radio" name="rad1" value="b" checked>
<i></i> Radio 2
</label>
<br>
<label class="ckb">
<input type="checkbox" name="ckb1" value="a" checked>
<i aria-hidden="true"></i> Checkbox 1
</label>
<label class="ckb">
<input type="checkbox" name="ckb2" value="b">
<i aria-hidden="true"></i> Checkbox 2
</label>
Example:
Heads up! This solution is CSS-only.
I recommend you take advantage of CSS3 to do that, by hidding the by-default input radio button with CSS3 rules:
.options input{
margin:0;padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
I just make an example a few days ago.
JSFiddle
How to use images for radio-buttons - Gist
You can use CSS for that.
HTML (only for demo, it is customizable)
<div class="button">
<input type="radio" name="a" value="a" id="a" />
<label for="a">a</label>
</div>
<div class="button">
<input type="radio" name="a" value="b" id="b" />
<label for="b">b</label>
</div>
<div class="button">
<input type="radio" name="a" value="c" id="c" />
<label for="c">c</label>
</div>
...
CSS
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
border: 1px solid red;
}
jsFiddle
Keep radio buttons hidden, and on clicking of images, select them using JavaScript and style your image so that it look like selected. Here is the markup -
<div id="radio-button-wrapper">
<span class="image-radio">
<input name="any-name" style="display:none" type="radio"/>
<img src="...">
</span>
<span class="image-radio">
<input name="any-name" style="display:none" type="radio"/>
<img src="...">
</span>
</div>
and JS
$(".image-radio img").click(function(){
$(this).prev().attr('checked',true);
})
CSS
span.image-radio input[type="radio"]:checked + img{
border:1px solid red;
}
Just using a class to only hide some...based on https://stackoverflow.com/a/17541916/1815624
/* HIDE RADIO */
.hiddenradio [type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* IMAGE STYLES */
.hiddenradio [type=radio] + img {
cursor: pointer;
}
/* CHECKED STYLES */
.hiddenradio [type=radio]:checked + img {
outline: 2px solid #f00;
}
<div class="hiddenradio">
<label>
<input type="radio" name="test" value="small" checked>
<img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>
<label>
<input type="radio" name="test" value="big">
<img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
</div>
<div class="">
<label>
<input type="radio" name="test" value="small" checked>
<img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>
<label>
<input type="radio" name="test" value="big">
<img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
</div>
Here is a simple jQuery UI solution based on the example here:
http://jqueryui.com/button/#radio
Modified code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button - Radios</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
</head>
<body>
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1"><img src="image1.gif" /></label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2"><img src="image2.gif" /></label>
<input type="radio" id="radio3" name="radio"><label for="radio3"><img src="image3.gif" /></label>
</div>
</form>
</body>
</html>
jQueryUI takes care of the image background so you know which button is checked.
Beware: If you want to set a button to checked or unchecked via Javascript, you must call the refresh function:
$('#radio3').prop('checked', true).button("refresh");
Images can be placed in place of radio buttons by using label and span elements.
<div class="customize-radio">
<label>Favourite Smiley</label><br>
<label for="hahaha">
<input type="radio" name="smiley" id="hahaha">
<span class="haha-img"></span>
HAHAHA
</label>
<label for="kiss">
<input type="radio" name="smiley" id="kiss">
<span class="kiss-img"></span>
Kiss
</label>
<label for="tongueOut">
<input type="radio" name="smiley" id="tongueOut">
<span class="tongueout-img"></span>
TongueOut
</label>
</div>
Radio button should be hidden,
.customize-radio label > input[type = 'radio'] {
visibility: hidden;
position: absolute;
}
Image can be given in the span tag,
.customize-radio label > input[type = 'radio'] ~ span{
cursor: pointer;
width: 27px;
height: 24px;
display: inline-block;
background-size: 27px 24px;
background-repeat: no-repeat;
}
.haha-img {
background-image: url('hahabefore.png');
}
.kiss-img{
background-image: url('kissbefore.png');
}
.tongueout-img{
background-image: url('tongueoutbefore.png');
}
To change the image on click of radio button, add checked state to the input tag,
.customize-radio label > input[type = 'radio']:checked ~ span.haha-img{
background-image: url('haha.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.kiss-img{
background-image: url('kiss.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.tongueout-img{
background-image: url('tongueout.png');
}
If you have any queries, Refer to the following link, As I have taken solution from the below blog,
http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html
Here is very simple example
input[type="radio"]{
display:none;
}
input[type="radio"] + label
{
background-image:url(http://www.clker.com/cliparts/c/q/l/t/l/B/radiobutton-unchecked-sm-md.png);
background-size: 100px 100px;
height: 100px;
width: 100px;
display:inline-block;
padding: 0 0 0 0px;
cursor:pointer;
}
input[type="radio"]:checked + label
{
background-image:url(http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-md.png);
}
<div>
<input type="radio" id="shipadd1" value=1 name="address" />
<label for="shipadd1"></label>
value 1
</div>
<div>
<input type="radio" id="shipadd2" value=2 name="address" />
<label for="shipadd2"></label>
value 2
</div>
Demo: http://jsfiddle.net/La8wQ/2471/
This example based on this trick: https://css-tricks.com/the-checkbox-hack/
I tested it on: chrome, firefox, safari
$spinTime: 3;
html, body { height: 100%; }
* { user-select: none; }
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Raleway', sans-serif;
font-size: 72px;
input {
display: none;
+ div > span {
display: inline-block;
position: relative;
white-space: nowrap;
color: rgba(#fff, 0);
transition: all 0.5s ease-in-out;
span {
display: inline-block;
position: absolute;
left: 50%;
text-align: center;
color: rgba(#000, 1);
transform: translateX(-50%);
transform-origin: left;
transition: all 0.5s ease-in-out;
&:first-of-type {
transform: rotateY(0deg) translateX(-50%);
}
&:last-of-type {
transform: rotateY(0deg) translateX(0%) scaleX(0.75) skew(23deg,0deg);
}
}
}
&#fat:checked ~ div > span span {
&:first-of-type {
transform: rotateY(0deg) translateX(-50%);
}
&:last-of-type {
transform: rotateY(0deg) translateX(0%) scaleX(0.75) skew(23deg,0deg);
}
}
&#fit:checked ~ div > span {
margin: 0 -10px;
span {
&:first-of-type {
transform: rotateY(90deg) translateX(-50%);
}
&:last-of-type {
transform: rotateY(0deg) translateX(-50%) scaleX(1) skew(0deg,0deg);
}
}
}
+ div + div {
width: 280px;
margin-top: 10px;
label {
display: block;
padding: 20px 10px;
text-align: center;
transition: all 0.15s ease-in-out;
background: #fff;
border-radius: 10px;
box-sizing: border-box;
width: 48%;
font-size: 64px;
cursor: pointer;
&:first-child {
float: left;
box-shadow:
inset 0 0 0 4px #1597ff,
0 15px 15px -10px rgba(darken(#1597ff, 10%), 0.375);
}
&:last-child { float: right; }
}
}
&#fat:checked ~ div + div label {
&:first-child {
box-shadow:
inset 0 0 0 4px #1597ff,
0 15px 15px -10px rgba(darken(#1597ff, 10%), 0.375);
}
&:last-child {
box-shadow:
inset 0 0 0 0px #1597ff,
0 10px 15px -20px rgba(#1597ff, 0);
}
}
&#fit:checked ~ div + div label {
&:first-child {
box-shadow:
inset 0 0 0 0px #1597ff,
0 10px 15px -20px rgba(#1597ff, 0);
}
&:last-child {
box-shadow:
inset 0 0 0 4px #1597ff,
0 15px 15px -10px rgba(darken(#1597ff, 10%), 0.375);
}
}
}
}
<input type="radio" id="fat" name="fatfit">
<input type="radio" id="fit" name="fatfit">
<div>
GET F<span>A<span>A</span><span>I</span></span>T
</div>
<div>
<label for="fat">🍕</label>
<label for="fit">💪🏼</label>
</div>
This works for me:
input[type="radio"] {
margin-right: 1em;
appearance: none;
width: 12px;
height: 12px;
background-image: url("checkbox_off.gif");
}
input[type="radio"]:checked {
background-image: url("checkbox_on.gif");
}
I am simply using HTML, CSS and Javascript where I am using the "toggle" method to open and close the dropdown. Also, I am using "mouseup" method to close the dropdown when someone clicks outside of it.
But the "toggle" method is not working along with the "mouseup" method. And I also need "mouseup" method to close the dropdown when user clicks outside of it. So, please tell me the solution to it, why "toggle" is not working with "mouseup" method. Thanks in Advance.
Here is the code:
var selectLabel = document.getElementById('selectLabel');
selectLabel.addEventListener('click', () => {
let dropdownDiv = selectLabel.parentElement.querySelector('.selection-dropdown');
selectLabel.classList.toggle('active');
dropdownDiv.classList.toggle('show');
});
document.addEventListener('mouseup', (e) => {
e.stopPropagation();
let dropdownDiv = document.querySelector('.selection-dropdown');
if (dropdownDiv.classList.contains('show')) {
if (!e.target.classList.contains('selection-dropdown') && !e.target.parentNode.closest('.selection-dropdown')) {
selectLabel.classList.remove('active');
document.querySelector('.selection-dropdown').classList.remove('show');
}
}
});
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
font-family: 'Arial', sans-serif;
}
.selection-box {
width: 500px;
position: relative;
}
.selection-box .select-upper-label {
padding: 0.75rem 1rem;
border: 1px solid #ccc;
border-radius: 3px;
color: #202020;
display: block;
width: 100%;
font-size: 1rem;
position: relative;
white-space: nowrap;
cursor: pointer;
}
.selection-box .select-upper-label::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
border: 3px solid #808080;
border-top: 0;
border-right: 0;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
right: 15px;
pointer-events: none;
transition: all 0.2s linear;
}
.selection-box .select-upper-label.active::after {
transform: translateY(-50%) rotate(135deg);
}
.selection-dropdown {
padding: 1.5rem 1rem;
box-shadow: 0 8px 45px rgba(0, 0, 0, 0.15);
position: absolute;
width: 100%;
top: 100%;
display: none;
border-radius: 5px;
}
.selection-dropdown.show {
display: block;
}
.selection-dropdown .select-all-link {
text-decoration: none;
color: #555;
display: block;
margin-bottom: 0.5rem;
color: royalblue;
}
.selection-dropdown .selection-dropdown-list label {
display: block;
padding: 0.5rem 1rem;
}
<div class="selection-box">
<label class="select-upper-label" id="selectLabel">Select options</label>
<div class="selection-dropdown">
<i class="ion-checkmark-round"></i> Select All
<div class="selection-dropdown-list">
<label class="label" for="option1"><input type="checkbox" id="option1"> Option 1</label>
<label class="label" for="option2"><input type="checkbox" id="option2"> Option 2</label>
<label class="label" for="option3"><input type="checkbox" id="option3"> Option 3</label>
<label class="label" for="option4"><input type="checkbox" id="option4"> Option 4</label>
<label class="label" for="option5"><input type="checkbox" id="option5"> Option 5</label>
</div>
</div>
</div>
I am trying to modify some default radio buttons on a Wordpress plugin, by using just CSS only. I have inspected the webpage to get the required variables, but can't get it to work properly.
No Thanks (Functionality works, button missing)
Yes, Every Month (Functionality works, button displayed)
The second custom radio button displays and functions correctly...however I cannot get the first radio button to display at all (functionality from clicking the text still works, so I think it's purely a display issue).
Is there something obvious I am missing?
Webpage Radio Button Code:
/*Remove Default Radio Button */
input[type=radio] {
display: none;
}
/*Add new radio buttons*/
[type="radio"] + span::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.25em;
border-radius: 1em;
border: 0.125em solid #fff;
box-shadow: 0 0 0 0.15em #000;
margin-right: 0.75em;
transition: 0.5s ease all;
}
[type="radio"]:checked + span::before {
background: #61ce70;
box-shadow: 0 0 0 0.25em #000;
}
<ul class="wcsatt-options-cart">
<li>
<label>
<input type="radio" name="convert_to_sub" value="0">
No thanks.
</label>
</li>
<li>
<label>
<input type="radio" name="convert_to_sub" value="1_month" checked="checked">
Yes, <span class="subscription-details">every month</span>.
</label>
</li>
</ul>
Thanks in advance!
You missed writing <span>
Your custom button related to <span> which styled CSS.
/*Remove Default Radio Button */
input[type=radio] {
display: none;
}
/*Add new radio buttons*/
[type="radio"] + span::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.25em;
border-radius: 1em;
border: 0.125em solid #fff;
box-shadow: 0 0 0 0.15em #000;
margin-right: 0.75em;
transition: 0.5s ease all;
}
[type="radio"]:checked + span::before {
background: #61ce70;
box-shadow: 0 0 0 0.25em #000;
}
<ul class="wcsatt-options-cart">
<li>
<label>
<input type="radio" name="convert_to_sub" value="0">
<span>No thanks. </span>
</label>
</li>
<li>
<label>
<input type="radio" name="convert_to_sub" value="1_month" checked="checked">
<span class="subscription-details">Yes, every month</span>.
</label>
</li>
</ul>
Please Try This:
<ul class="wcsatt-options-cart">
<li>
<label>
<input type="radio" name="convert_to_sub" value="0">
<span class="label-wrap">No thanks.</span>
</label>
</li>
<li>
<label>
<input type="radio" name="convert_to_sub" value="1_month" checked="checked">
<span class="label-wrap"> Yes, <span class="subscription-details">every month</span>. </span>
</label>
</li>
</ul>
CSS:-
/*Remove Default Radio Button */
.wcsatt-options-cart input[type=radio] {
position: absolute;
top:0px;
left:0px;
width:100%;
height:100%;
cursor: pointer;
opacity: 0;
}
.wcsatt-options-cart label { position: relative; }
/*Add new radio buttons*/
[type="radio"] + span.label-wrap::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.25em;
border-radius: 1em;
border: 0.125em solid #fff;
box-shadow: 0 0 0 0.15em #000;
margin-right: 0.75em;
transition: 0.5s ease all;
}
[type="radio"]:checked + span.label-wrap::before {
background: #61ce70;
box-shadow: 0 0 0 0.25em #000;
}
https://www.w3schools.com/code/tryit.asp?filename=FG1ZE0NJ4ZX7
I made a progress bar that looks like the screenshot
and it turns to green when I hover on it.
I want to make make the bg-color changed to green
and change it back to white when I click another bar.
Please help!
I will suggest you use jquery, add click event to all <a> under element with class breadcrumb:
$('.breadcrumb > a').on('click', function() {
$('.breadcrumb > a').removeClass('active');
$(this).addClass('active');
})
Use CSS rule active, when a tab clicked, remove all active then add class active to the one you just clicked.
$('.breadcrumb > a').on('click', function() {
$('.breadcrumb > a').removeClass('active');
$(this).addClass('active');
})
.active {
background: #444
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"] {
display: none;
}
input[type="radio"] {
display: none;
}
.breadcrumb {
/*centering*/
display: inline-block;
background-color: white;
overflow: hidden;
border-radius: 5px;
/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
counter-reset: flag;
margin-bottom: 0px;
border: 1px solid #ccc !important;
padding: 0;
}
.breadcrumb a {
text-decoration: none;
outline: none;
display: block;
float: left;
line-height: 36px;
color: white;
/*need more margin on the left of links to accomodate the numbers*/
padding: 0 10px 0 60px;
background: #666;
background: linear-gradient(#666, #333);
position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {
padding-left: 46px;
}
.breadcrumb a:first-child:before {
left: 14px;
}
.breadcrumb a:last-child {
padding-right: 20px;
}
/*hover/active styles*/
.breadcrumb a.active,
.breadcrumb a:hover {
background: #333;
background: linear-gradient(#333, #000);
}
.breadcrumb a.active:after,
.breadcrumb a:hover:after {
background: #333;
background: linear-gradient(135deg, #333, #000);
}
/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {
content: '';
position: absolute;
top: 0;
right: -18px;
/*half of square's length*/
/*same dimension as the line-height of .breadcrumb a */
width: 36px;
height: 36px;
transform: scale(0.707) rotate(45deg);
/*we need to prevent the arrows from getting buried under the next link*/
z-index: 1;
/*background same as links but the gradient will be rotated to compensate with the transform applied*/
background: linear-gradient(135deg, #666, #333);
/*stylish arrow design using box shadow*/
box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {
content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb a:before {
/*some styles now*/
border-radius: 100%;
width: 20px;
height: 20px;
line-height: 20px;
margin: 8px 0;
position: absolute;
top: 0;
left: 30px;
background: #444;
background: linear-gradient(#444, #222);
font-weight: bold;
}
.flat a,
.flat a:after {
background: white;
color: black;
transition: all 0.5s;
}
.flat a:hover,
.flat a.active,
.flat a:hover:after,
.flat a.active:after {
color: white;
background: #369F00;
}
.flat input[type="radio"]:checked~label {
background: #369F00;
color: white;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="breadcrumb flat">
<a href="#">
Invite a New Applicant
</a>
<a href="#">
<label class="radio-inline">
<input type="radio" value="new" data-bind="checked: applicationsFilter" class="" name="ko_unique_9"> New Applicants (
<span data-bind="text: newApplicationsCount">4</span>)
</label>
</a>
<a href="#">
<label class="radio-inline">
<input type="radio" value="shortlisted" data-bind="checked: applicationsFilter" name="ko_unique_10"> Shortlisted Applicants (
<span data-bind="text: shortlistedApplicationsCount">0</span>)
</label>
</a>
<a href="#">
<label class="radio-inline">
<input type="radio" value="connected" data-bind="checked: applicationsFilter" name="ko_unique_11"> Connected Applicants (
<span data-bind="text: connectedApplicationsCount">0</span>)
</label>
</a>
</div>
<div class="breadcrumb flat">
<a href="#">
<label class="radio-inline" data-bind="visible: applications().length > 0">
<input type="checkbox" data-bind="checked: showHiddenApplications">
Hidden
</label>
</a>
</div>
</div>
</div>
</body>
</html>
I want to use a CSS styleheet for 3 different checkboxes on the same HTML page.I'm unsure how to declare the location of the checkboxes to make them all in line with the text. Here is my CSS stylesheet for the checkbox:
input[type=checkbox]
{
visibility: hidden;
}
.checkboxOne {
background: none repeat scroll 0 0 #484848;
border-radius: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
height: 40px;
margin: -30px 200px;
position: relative;
width: 40px;
}
.checkboxOne input[type="checkbox"]:checked + label {
background: none repeat scroll 0 0 #6E0000;
}
.checkboxOne label:before {
content:'N';
padding:6px;
color:#000000;
display: block;
padding: 4px;
text-align: center;
}
.checkboxOne input[type="checkbox"]:checked + label:before {
content:'Y';
padding:6px;
color:#FFFFFF;
display:block;
padding: 4px;
text-align: center;
}
.checkboxOne label {
background: none repeat scroll 0 0 #DDDDDD;
border-radius: 100px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) inset;
cursor: pointer;
display: block;
height: 30px;
left: 5px;
position: absolute;
top: 5px;
transition: all 0.5s ease 0s;
width: 30px;
z-index: 1;
}
I know that margin is the location of the checkbox hard coded. I am hoping there is a way to make the checkboxes location inline right after the text in the html document, like this:
Did you eat breakfast? <div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxInput" name="" />
<label for="checkboxInput"></label>
</div><br>
Did you eat lunch? <div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxInput2" name="" />
<label for="checkboxInput2"></label>
</div><br>
Did you eat dinner? <div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxInput3" name="" />
<label for="checkboxInput3"></label>
</div><br>
Let's do a proper form! Sorted out what you want now.
Correct answer Look at the fiddle - http://jsfiddle.net/Wa5s8/2/
HTML
<form>
<fieldset>
<input type="checkbox" value="1" id="checkboxInput" name="" />
<label for="checkboxInput">Did you eat breakfast?</label>
<input type="checkbox" value="1" id="checkboxInput2" name="" />
<label for="checkboxInput2">Did you eat lunch?</label>
<input type="checkbox" value="1" id="checkboxInput3" name="" />
<label for="checkboxInput3">Did you eat dinner?</label>
</fieldset>
</form>
A pinch of CSS:
input[type=checkbox] {
display:none;
}
label {
float: left;
clear: left;
width: 200px;
}
input[type=checkbox] + label:after
{
content: 'N';
background: #F00;
float: right;
}
input[type=checkbox]:checked + label:after
{
content: 'Y';
background: #FF0;
}
Possibly you could try:
HTML
<div class="row">
<input type="radio" /> <span>Radio title </span>
</div>
CSS:
.row{ display:block;}
.row span{margin:0 0 0 10px;}