I'm having a problem align my custom radio button and text (see image)
I've use css for my radio buttons and can't seem to align them .
here's my HTML :
label.item {
display: inline-block;
position: relative;
}
label.item > input {
visibility: hidden;
position: absolute;
}
label.item > .radio-image::before {
content: url("../tools/unchecked.png");
}
label.item > input[type="radio"]:checked + .radio-image::before {
content: url("../tools/checked.png");
}
label.item > input[type="radio"]:hover + .radio-image::before{
cursor: pointer;
}
<div class = "container">
<div class = "form-group">
<label>Body</label>
<label class="item">
<input type="radio" value="Good/Minor Flaws" name="size" required="required" />
<div class="radio-image text-center">Good / Minor Flaws</div>
</label>
<label class="item">
<input type="radio" value="Major Damage" name="size" required="required"/>
<div class="radio-image text-center">Major Damage </div>
</label>
</div>
</div>
https://jsfiddle.net/h2q7y4uj/#&togetherjs=ADTFQvN22E
Here you go with a solution https://jsfiddle.net/h2q7y4uj/4/
div.item {
display: inline-block;
position: relative;
}
div.item > input {
visibility: hidden;
position: absolute;
}
div.item > .radio-image::before {
content: url(http://via.placeholder.com/50x50);
}
div.item > input[type="radio"]:checked + .radio-image::before {
content: url(http://via.placeholder.com/51x51);
}
div.item > input[type="radio"]:hover + .radio-image::before {
cursor: pointer;
}
.radio-image {
position: relative;
width: 200px;
}
.radio-image > span{
position: absolute;
top: 45%;
transform: translateY(-50%);
}
<div class="container">
<div class="form-group">
<label>Body</label>
<div class="item">
<input type="radio" value="Good/Minor Flaws" name="size" required="required" />
<div class="radio-image text-center">
<span>Good / Minor Flaws</span></div>
</div>
<div class="item">
<input type="radio" value="Major Damage" name="size" required="required" />
<div class="radio-image text-center">
<span>Major Damage</span> </div>
</div>
</div>
</div>
Hope this will help you.
Just update following css code
.radio-image {
display: inline-block;
line-height: 30px;
}
label.item>.radio-image::before {
content: url("../tools/unchecked.png");
float: left;
line-height: 30px;
display: inline-block;
padding-right: 5px;
}
Related
I'm Having trouble with my radio buttons, I don't want them to entirely fill the circle. Any word of advice. Here is link to what is happening on Codepen.
https://codepen.io/winterlion/pen/LYYJwZP
.item .text {
position: absolute;
display: inline-block;
cursor: pointer;
}
.item .text:before {
content: '';
display: inline-block;
vertical-align: text-bottom;
width: 18px;
height: 18px;
margin-right: 5px;
border-radius: 50%;
border: 2px solid #235b96;
outline: none;
box-shadow: 0 0 5px 0px gray inset;
}
.item input[type="radio"] {
display: none;
}
.item input[type="radio"]:checked+label .text:before {
content: '';
color: #235b96;
background-color: #479623;
}
<div class="item">
<input type="radio" id="r1" name="group1" value="trial1" />
<label for="r1" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Radio Buttons</h1>
<hr class="split-hr">
<br>
<span class="text"></span>
</label>
</div>
<div class="item">
<input type="radio" id="r2" name="group1" value="trial2" />
<label for="r2" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Buttons</h1>
<span class="text"></span>
</label>
</div>
If I understood your question right, you just want to move styles related to a green dot to an ::after pseudo element that must be a bit smaller than ::before.
.item .text {
position: absolute;
display: inline-block;
cursor: pointer;
}
.item .text::before,
.item .text::after {
content: '';
display: inline-block;
margin-right: 5px;
border-radius: 50%;
}
.item .text::before {
width: 18px;
height: 18px;
border: 2px solid #235b96;
box-shadow: 0 0 5px 0px gray inset;
}
.item input[type="radio"]:checked + label .text::after {
width: 12px;
height: 12px;
position: absolute;
left: 5px;
top: 5px;
}
.item input[type="radio"] {
display: none;
}
.item input[type="radio"]:checked + label .text:after {
color: #235b96;
background-color: #479623;
}
<div class="item">
<input type="radio" id="r1" name="group1" value="trial1" />
<label for="r1" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Radio Buttons</h1>
<hr class="split-hr">
<br>
<span class="text"></span>
</label>
</div>
<div class="item">
<input type="radio" id="r2" name="group1" value="trial2" />
<label for="r2" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Buttons</h1>
<span class="text"></span>
</label>
</div>
I've added the following to the css and html file:
.currencyinput {
border: 1px inset #eee;
}
.currencyinput input {
border: 0;
}
<td><span class="currencyinput">$<input type="text" name="amount"></span></td>
And my resulting page shows the $ and then the textbox on a new line below it. I was intending the $ to be in the textbox.
Appreciate any insight on this. Thanks!
Consider simulating an input field with a fixed using a span with a border around a border less input field. Here's a basic example:
<div class="container">
<h3>Basic form example</h3>
<div class="form-group">
<div class="input-icon">
<i>$</i>
<input type="text" class="form-control" placeholder="0.00">
</div>
</div>
<div class="form-group">
<div class="input-icon input-icon-right">
<i>€</i>
<input type="text" class="form-control" placeholder="0.00">
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="fa fa-bitcoin"></i>
<input type="text" class="form-control" placeholder="0.00">
</div>
</div>
<h3>Example using <code>form-inline</code></h3>
<div class="alert alert-danger visible-xs">This window needs to be made
larger to see the inline example.</div>
<form class="form-inline">
Some text here
<div class="form-group input-icon">
<i>$</i>
<input type="text" class="form-control" placeholder="0.00">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
CSS:
.input-icon {
position: relative;
}
.input-icon > i {
position: absolute;
display: block;
transform: translate(0, -50%);
top: 50%;
pointer-events: none;
width: 25px;
text-align: center;
font-style: normal;
}
.input-icon > input {
padding-left: 25px;
padding-right: 0;
}
.input-icon-right > i {
right: 0;
}
.input-icon-right > input {
padding-left: 0;
padding-right: 25px;
text-align: right;
}
use this css for remove focus border input:focus{outline: none;}
.currencyinput span{
position: relative;
}
.currencyinput input{
padding-left:20px;
}
.currencyinput span{
left:15px;
top:0
position: absolute;
}
.currencyinput input:focus {
outline: none;
}
<span class="currencyinput"><span>$</span><input type="text" name="amount"></span>
I have a radio button which i have given some style.
when i click on it then the div background color should change.
.no_of_speakers_radio_button {
margin: 0 auto;
display: flex;
padding: 35px 0px;
text-align: center;
flex-direction: column;
border:thin red solid;
width:100px;
}
.no_of_speakers_radio_button label {
overflow: hidden;
}
.no_of_speakers_radio_button label span {
text-align: center;
font-size: 15px;
margin: auto;
display: block;
}
.no_of_speakers_radio_button input {
position: absolute;
}
.no_of_speakers_radio_button input:checked + span {
background-color: #ebeff1;
text-align: center;
}
.no_of_speakers_radio_button input:not(:checked + span) {
background: transparent;
}
.no_of_speakers_radio_button:hover{
background: #ebeff1;
}
<div class="no_of_speakers_radio_button">
<label class="four_speakers">
<input type="radio" name="choose_speaker" class="click">
<span class="font_size_20">4</span>
<span class="font_size_17">Speakers</span>
</label>
</div>
<div class="no_of_speakers_radio_button">
<label class="eight_speakers">
<input type="radio" name="choose_speaker" class="click">
<span class="font_size_20">8</span>
<span class="font_size_17">Speakers</span>
</label>
</div>
What i want is, when clicking on radio button then whole div background should change rather than changing only span background.
Thank you.
With pure css, you can't select a parent element from within a child
element
Approach #01 (Without HTML Modifications):
Without modifying current HTML structure, you can use :before or :after pseudo element to create a fake active state.
You will need to add following CSS:
.no_of_speakers_radio_button {
position: relative;
}
.no_of_speakers_radio_button input:checked + span:before {
background-color: #ebeff1;
position: absolute;
z-index: -1;
content: '';
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.no_of_speakers_radio_button {
margin: 0 auto;
display: flex;
padding: 35px 0px;
text-align: center;
flex-direction: column;
border:thin red solid;
position: relative;
width:100px;
}
.no_of_speakers_radio_button label {
overflow: hidden;
}
.no_of_speakers_radio_button label span {
text-align: center;
font-size: 15px;
margin: auto;
display: block;
}
.no_of_speakers_radio_button input {
position: absolute;
}
.no_of_speakers_radio_button input:checked + span {
background-color: #ebeff1;
text-align: center;
}
.no_of_speakers_radio_button input:checked + span:before {
background-color: #ebeff1;
position: absolute;
z-index: -1;
content: '';
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.no_of_speakers_radio_button input:not(:checked + span) {
background: transparent;
}
.no_of_speakers_radio_button:hover{
background: #ebeff1;
}
<div class="no_of_speakers_radio_button">
<label class="four_speakers">
<input type="radio" name="choose_speaker" class="click">
<span class="font_size_20">4</span>
<span class="font_size_17">Speakers</span>
</label>
</div>
<div class="no_of_speakers_radio_button">
<label class="eight_speakers">
<input type="radio" name="choose_speaker" class="click">
<span class="font_size_20">8</span>
<span class="font_size_17">Speakers</span>
</label>
</div>
Alternate Approach (With HTML Modification):
You can modify your HTML to the code below. The trick is to place original input out of the view and place a fake input[type="radio"] button in place.
HTML:
<div class="no_of_speakers_radio_button">
<input type="radio" id="radio1" name="choose_speaker" class="click">
<label class="four_speakers" for="radio1">
<div>
<span class="font_size_20">4</span>
<span class="fake-radio"></span>
</div>
<span class="font_size_17">Speakers</span>
</label>
</div>
CSS:
.no_of_speakers_radio_button input {
position: absolute;
opacity: 0;
left: -9999px;
top: -9999px;
}
.no_of_speakers_radio_button label .fake-radio {
position: relative;
border: 1px solid black;
border-radius: 100%;
height: 12px;
width: 12px;
}
.no_of_speakers_radio_button label .fake-radio:before {
background-color: #222;
border-radius: 100%;
position: absolute;
opacity: 0;
z-index: 10;
content: '';
bottom: 2px;
right: 2px;
left: 2px;
top: 2px;
}
.no_of_speakers_radio_button input:checked + label .fake-radio:before {
opacity: 1;
}
.no_of_speakers_radio_button {
margin: 0 auto;
border:thin red solid;
position: relative;
overflow: hidden;
width:100px;
}
.no_of_speakers_radio_button label {
padding: 35px 0px;
text-align: center;
flex-direction: column;
position: relative;
cursor: pointer;
display: flex;
height: 100%;
}
.no_of_speakers_radio_button div span {
text-align: center;
font-size: 15px;
margin: auto;
display: inline-block;
vertical-align: middle;
}
.no_of_speakers_radio_button input {
position: absolute;
opacity: 0;
left: -9999px;
top: -9999px;
}
.no_of_speakers_radio_button label .fake-radio {
position: relative;
border: 1px solid black;
border-radius: 100%;
height: 12px;
width: 12px;
}
.no_of_speakers_radio_button label .fake-radio:before {
background-color: #222;
border-radius: 100%;
position: absolute;
opacity: 0;
z-index: 10;
content: '';
bottom: 2px;
right: 2px;
left: 2px;
top: 2px;
}
.no_of_speakers_radio_button input:checked + label {
background-color: #ebeff1;
}
.no_of_speakers_radio_button input:checked + label .fake-radio:before {
opacity: 1;
}
.no_of_speakers_radio_button input:not(:checked + span) {
background: transparent;
}
.no_of_speakers_radio_button label:hover {
background: #ebeff1;
}
<div class="no_of_speakers_radio_button">
<input type="radio" id="radio1" name="choose_speaker" class="click">
<label class="four_speakers" for="radio1">
<div>
<span class="font_size_20">4</span>
<span class="fake-radio"></span>
</div>
<span class="font_size_17">Speakers</span>
</label>
</div>
<div class="no_of_speakers_radio_button">
<input type="radio" id="radio2" name="choose_speaker" class="click">
<label class="eight_speakers" for="radio2">
<div>
<span class="font_size_20">8</span>
<span class="fake-radio"></span>
</div>
<span class="font_size_17">Speakers</span>
</label>
</div>
<div class="no_of_speakers_radio_button">
<input type="radio" id="radio3" name="choose_speaker" class="click">
<label class="eight_speakers" for="radio3">
<div>
<span class="font_size_20">8</span>
<span class="fake-radio"></span>
</div>
<span class="font_size_17">Speakers</span>
</label>
</div>
<div class="no_of_speakers_radio_button">
<input type="radio" id="radio4" name="choose_speaker" class="click">
<label class="eight_speakers" for="radio4">
<div>
<span class="font_size_20">8</span>
<span class="fake-radio"></span>
</div>
<span class="font_size_17">Speakers</span>
</label>
</div>
<div class="no_of_speakers_radio_button">
<input type="radio" id="radio5" name="choose_speaker" class="click">
<label class="eight_speakers" for="radio5">
<div>
<span class="font_size_20">8</span>
<span class="fake-radio"></span>
</div>
<span class="font_size_17">Speakers</span>
</label>
</div>
You can use JQuery for this:
$(document).ready(function() {
$('.no_of_speakers_radio_button input[type="radio"]').click(function() {
$(this).parent().parent().addClass("selected");
});
});
CSS:
.no_of_speakers_radio_button.selected {
background: #ebeff1;
}
Using css there is no click trigger. However you can use javascript for click function to toggle background color
var radio1 = document.getElementsByClassName("click")[0];
var radio2 = document.getElementsByClassName("click")[1];
radio1.addEventListener("click",function(){
radio1.parentNode.parentNode.style.backgroundColor="red";
radio2.parentNode.parentNode.style.backgroundColor="white";
})
radio2.addEventListener("click",function(){
radio2.parentNode.parentNode.style.backgroundColor="red";
radio1.parentNode.parentNode.style.backgroundColor="white";
})
.no_of_speakers_radio_button {
margin: 0 auto;
display: flex;
padding: 35px 0px;
text-align: center;
flex-direction: column;
border:thin red solid;
width:100px;
}
.no_of_speakers_radio_button label {
overflow: hidden;
}
.no_of_speakers_radio_button label span {
text-align: center;
font-size: 15px;
margin: auto;
display: block;
}
.no_of_speakers_radio_button input {
position: absolute;
}
.no_of_speakers_radio_button input:checked + span {
text-align: center;
}
.no_of_speakers_radio_button input:not(:checked + span) {
background: transparent;
}
.no_of_speakers_radio_button:hover{
background: #ebeff1;
}
<div class="no_of_speakers_radio_button" class="four_speakers">
<label >
<input type="radio" name="choose_speaker" class="click" >
<span class="font_size_20">4</span>
<span class="font_size_17">Speakers</span>
</label>
</div>
<div class="no_of_speakers_radio_button">
<label class="eight_speakers">
<input type="radio" name="choose_speaker" class="click">
<span class="font_size_20">8</span>
<span class="font_size_17">Speakers</span>
</label>
</div>
You cannot traverse a parent in css i.e. there is no parent-selector.
However you can modify your html structure and style it in such a way as to achieve what you want here. I have modified your code a little bit here:
.no_of_speakers_radio_button {
margin: 0 auto;
display: flex;
height: 100px;
padding: 0;
text-align: center;
flex-direction: column;
border: thin red solid;
width: 100px;
}
.no_of_speakers_radio_button label {
overflow: hidden;
height: 100%;
display: block;
}
.no_of_speakers_radio_button label span {
text-align: center;
font-size: 15px;
margin: auto;
display: block;
}
.no_of_speakers_radio_button input {
position: absolute;
margin-top: 40px;
}
.no_of_speakers_radio_button input:checked + span {
background-color: #ebeff1;
text-align: center;
}
.no_of_speakers_radio_button input:not(:checked + span) {
background: transparent;
}
.no_of_speakers_radio_button:hover {
background: #ebeff1;
}
.font_size_20 {
height: 60px;
padding-top: 40px;
}
<div class="no_of_speakers_radio_button">
<label class="four_speakers">
<input type="radio" name="choose_speaker" class="click">
<span class="font_size_20">4 <span>Speakers</span> </span>
</label>
</div>
<div class="no_of_speakers_radio_button">
<label class="eight_speakers">
<input type="radio" name="choose_speaker" class="click">
<span class="font_size_20">8 <span>Speakers</span></span>
</label>
</div>
give a radio button a class name and in that class just put change background
I have a carousel created with only CSS, but I have identified some difficulties. All images are in the 4:3 aspect ratio and may have a maximum of 640x480 px (that is, they can be smaller than this value), so:
I can not center the next and previous arrows;
The arrows can not be "floating" on the screen (if the next image is
smaller than the previous one, the arrows should not change
position);
I do not know how to set the size of the carousel according to the
largest image currently used.
The code:
html {
font-size: 10px;
}
body {
padding: 2rem;
background: #F8F8F8;
font-size: 16px;
}
.wrap {
max-width: 70rem;
margin: auto;
padding: 2rem;
background: #FFF;
}
.carousel {
position: relative;
display: -webkit-box;
display: flex;
max-width: 64rem;
min-height: 40rem;
margin: auto;
background: red;
-webkit-box-pack: center;
justify-content: center;
}
.group {
display: -webkit-box;
display: flex;
background: blue;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
}
.group input {
position: absolute;
top: -100%;
left: -100%;
display: none;
}
.group input ~ .content {
/* tentar fixar tamanho aqui */
display: none;
-webkit-box-ordinal-group: 3;
order: 2;
}
div.group input:checked ~ div.content {
display: block;
}
div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
display: block;
}
div.group label {
top: 50%;
display: none;
width: 50px;
height: 50px;
border: solid 1px black;
background-color: #69C;
transform: translateY(-50%);
}
img {
width: 100%;
height: 100%;
}
label {
margin: 125px 0 0 0;
font-size: 4em;
}
label.previous {
padding: 0 0 30px 5px;
-webkit-box-ordinal-group: 2;
order: 1;
}
label.next {
padding: 0 5px 25px 0;
text-align: right;
-webkit-box-ordinal-group: 4;
order: 3;
}
<!DOCTYPE html>
<html>
<head>
<title>Teste 3</title>
<link rel="stylesheet" type="text/css" href="teste3.css">
<meta charset="utf-8">
</head>
<body>
<div class="wrap">
<div class="carousel">
<div class="group">
<input type="radio" name="test" id="0" value="0">
<label for="4" class="previous"><</label>
<label for="1" class="next">></label>
<div class="content">
<img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png" width="200" height="286">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="1" value="1">
<label for="0" class="previous"><</label>
<label for="2" class="next">></label>
<div class="content">
<img src="https://www.ausmedia.com.au/Mmedia/4TO3.gif" width="200" height="139">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="2" value="2">
<label for="1" class="previous"><</label>
<label for="3" class="next">></label>
<div class="content">
<img src="http://www.cegepsherbrooke.qc.ca/~cpi/images/photo_4-3.jpg" width="140" height="200">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="3" value="3" checked="">
<label for="2" class="previous"><</label>
<label for="4" class="next">></label>
<div class="content">
<img src="http://www.projectorcentral.com/images/articles/4-3%20Bristlecone%20Pines.jpg" width="200" height="287">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="4" value="4">
<label for="3" class="previous"><</label>
<label for="0" class="next">></label>
<div class="content">
<img src="http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-for-monitor-4-3-almost-square-awesome/wallpaper-for-monitor-4-3-almost-square-awesome-951.jpg" width="96" height="139">
</div>
</div>
</div>
</div>
</body>
</html>
Can anyone help me find a solution or at least a balance in the measurements?
From what I understood,
You did not add
position: absolute to labels.
changed top to 18% to have them in center.
prev with left:0;
next with right:0;
This will set your labels as per the carousel, as it has the position relative.
html{
font-size: 10px;
}
body {
padding: 2rem;
background: #F8F8F8;
font-size: 16px;
}
.wrap {
max-width: 70rem;
margin: auto;
padding: 2rem;
background: #FFF;
}
.carousel {
position: relative;
display: -webkit-box;
display: flex;
max-width: 64rem;
min-height: 40rem;
margin: auto;
background: red;
-webkit-box-pack: center;
justify-content: center;
}
.group {
display: -webkit-box;
display: flex;
background: blue;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
}
.group input {
position: absolute;
top: -100%;
left: -100%;
display: none;
}
.group input ~ .content {
/* tentar fixar tamanho aqui */
display: none;
-webkit-box-ordinal-group: 3;
order: 2;
}
div.group input:checked ~ div.content {
display: block;
}
div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
display: block;
}
div.group label {
position:absolute;
top: 18%;
display: none;
width: 50px;
height: 50px;
border: solid 1px black;
background-color: #69C;
transform: translateY(-50%);
}
img {
width: 100%;
height: 100%;
}
label {
margin: 125px 0 0 0;
font-size: 4em;
}
label.previous {
padding: 0 0 30px 5px;
-webkit-box-ordinal-group: 2;
order: 1;
left:0;
}
label.next {
padding: 0 5px 25px 0;
text-align: right;
-webkit-box-ordinal-group: 4;
order: 3;
right:0;
}
<!DOCTYPE html>
<html>
<head>
<title>Teste 3</title>
<link rel="stylesheet" type="text/css" href="teste3.css">
<meta charset="utf-8">
</head>
<body>
<div class="wrap">
<div class="carousel">
<div class="group">
<input type="radio" name="test" id="0" value="0">
<label for="4" class="previous"><</label>
<label for="1" class="next">></label>
<div class="content">
<img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png" width="200" height="286">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="1" value="1">
<label for="0" class="previous"><</label>
<label for="2" class="next">></label>
<div class="content">
<img src="https://www.ausmedia.com.au/Mmedia/4TO3.gif" width="200" height="139">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="2" value="2">
<label for="1" class="previous"><</label>
<label for="3" class="next">></label>
<div class="content">
<img src="http://www.cegepsherbrooke.qc.ca/~cpi/images/photo_4-3.jpg" width="140" height="200">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="3" value="3" checked="">
<label for="2" class="previous"><</label>
<label for="4" class="next">></label>
<div class="content">
<img src="http://www.projectorcentral.com/images/articles/4-3%20Bristlecone%20Pines.jpg" width="200" height="287">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="4" value="4">
<label for="3" class="previous"><</label>
<label for="0" class="next">></label>
<div class="content">
<img src="http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-for-monitor-4-3-almost-square-awesome/wallpaper-for-monitor-4-3-almost-square-awesome-951.jpg" width="96" height="139">
</div>
</div>
</div>
</div>
</body>
</html>
Couple issues with your code Bianca. First off when we write HTML, it's best to leave out width and height properties within the actual html. The reason for this is that the browser will consider anything in your html as more important than external css files. We call this inline-styling or inline-styles when CSS is written directly into HTML. (Here's a good explanation of the hierarchy of CSS: Inline <style> tags vs. inline css properties )
Secondly, I updated your code, and included a max-width property to the content div, wherein your images are wrapped (the controlling css). So you can set that max-width to whatever you need, and it happens to work in this case.
Here's a Codepen: http://codepen.io/0rfila/pen/JbKrwj
And your updated code:
CSS:
html {
font-size: 10px;
}
body {
padding: 2rem;
background: #F8F8F8;
font-size: 16px;
}
.wrap {
max-width: 70rem;
margin: auto;
padding: 2rem;
background: #FFF;
}
.carousel {
position: relative;
display: -webkit-box;
display: flex;
max-width: 64rem;
min-height: 40rem;
margin: auto;
background: red;
-webkit-box-pack: center;
justify-content: center;
}
.group {
display: -webkit-box;
display: flex;
position: relative;
background: blue;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
}
.group input {
position: absolute;
top: -100%;
left: -100%;
display: none;
}
.group input ~ .content {
/* tentar fixar tamanho aqui */
display: none;
-webkit-box-ordinal-group: 3;
order: 2;
}
div.group input:checked ~ div.content {
display: block;
}
div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
display: block;
}
div.group label {
top: 50%;
display: none;
width: 50px;
height: 50px;
border: solid 1px black;
background-color: #69C;
transform: translateY(-50%);
}
img {
width: 100%;
height: 100%;
}
label {
margin: 125px 0 0 0;
font-size: 4em;
}
label.previous {
padding: 0 0 30px 5px;
-webkit-box-ordinal-group: 2;
order: 1;
}
label.next {
padding: 0 5px 25px 0;
text-align: right;
-webkit-box-ordinal-group: 4;
order: 3;
}
.content {
max-width: 400px;
}
HTML:
<!DOCTYPE html>
<head>
<title>Teste 3</title>
<link rel="stylesheet" type="text/css" href="teste3.css">
<meta charset="utf-8">
</head>
<body>
<div class="wrap">
<div class="carousel">
<div class="group">
<input type="radio" name="test" id="0" value="0">
<label for="4" class="previous"><</label>
<label for="1" class="next">></label>
<div class="content">
<img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="1" value="1">
<label for="0" class="previous"><</label>
<label for="2" class="next">></label>
<div class="content">
<img src="https://www.ausmedia.com.au/Mmedia/4TO3.gif">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="2" value="2">
<label for="1" class="previous"><</label>
<label for="3" class="next">></label>
<div class="content">
<img src="http://www.cegepsherbrooke.qc.ca/~cpi/images/photo_4-3.jpg">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="3" value="3" checked="">
<label for="2" class="previous"><</label>
<label for="4" class="next">></label>
<div class="content">
<img src="http://www.projectorcentral.com/images/articles/4-3%20Bristlecone%20Pines.jpg">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="4" value="4">
<label for="3" class="previous"><</label>
<label for="0" class="next">></label>
<div class="content">
<img src="http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-for-monitor-4-3-almost-square-awesome/wallpaper-for-monitor-4-3-almost-square-awesome-951.jpg">
</div>
</div>
</div>
</div>
</body>
</html>
I am setting up toogle button by absolutely positioning labels on top of checkboxes. I need them to horizontally aligned but they are just layering on top of each other.
<ul style="display: block; float: left;">
<li style="display: inline-block;">
<div class="btn_wrapper">
<input type="checkbox" value="1" id="newest" name=""/>
<label class="btn btn-sm btn-default" for="newest">Newest</label>
</div>
</li>
<li style="display: inline-block;">
<div class="btn_wrapper">
<input type="checkbox" value="1" id="popular" name=""/>
<label class="btn btn-sm btn-default" for="popular">Popular</label>
</div>
</li>
<li style="display: inline-block;">
<div class="btn_wrapper">
<input type="checkbox" value="1" id="price" name=""/>
<label class="btn btn-sm btn-default" for="price">Price</label>
</div>
</li>
</ul>
ul {
display: block;
li {
display: inline-block
.btn_wrapper {
position: relative;
clear: both;
label {
display: block;
cursor: pointer;
position: absolute;
top: 5px;
left: 5px;
z-index: 1;
background-color: #CCC;
}
input[type=checkbox], input[type=radio] {
position: absolute;
top: 5px;
left: 5px;
}
input[type=checkbox]:checked + label {
color: $shop_color_text_strong;
}
}
}
}
This is what it looks like:
This is what I ended up going with. Basically adding display: none to my inputs and removing the absolute position from the label it worked out fine.
ul {
display: block;
li.filter_btn {
margin-left: -2px;
}
li {
display: inline-block;
width: auto;
height: 30px;
label {
display: block;
cursor: pointer;
top: 5px;
left: 5px;
z-index: 1;
width: auto;
background-color: #CCC;
}
input[type=checkbox], input[type=radio] {
display: none;
}
input[type=checkbox]:checked + label {
color: $shop_color_text_strong;
}
}
}