I am unable to move all checkboxes right in one vertical line. I have no idea how can i do it. Because float:right added to .checkbox moves all content to right.
You can take a look for better understanding of my problem on site https://vitas.sk/OnlineTv/ (it loads slowly because of embed videos and big images)
<!-- BEGIN - FILTERS -->
<div class="indexfilters">
<div class="border">
<label class="checkbox">
<i class="fas fa-child"></i><a class="icontext">Starostlivosť o deti</a>
<input id="check1" type="checkbox" onchange="console.log('changed');">
<span></span>
</label><br>
<label class="checkbox">
<i class="fas fa-utensils"></i><a class="icontext">Zdravá strava</a>
<input id="check1" type="checkbox" onchange="console.log('changed');">
<span></span>
</label><br>
<label class="checkbox">
<i class="fas fa-book"></i><a class="icontext">Recepty</a>
<input id="check1" type="checkbox" onchange="console.log('changed');">
<span></span>
</label>
<label class="checkbox">
<i class="fas fa-crosshairs"></i><a class="icontext">Potravinové podvody</a>
<input id="check1" type="checkbox" onchange="console.log('changed');">
<span></span>
</label>
<label class="checkbox">
<i class="fas fa-ban"></i><a class="icontext">Jedy v potrave</a>
<input id="check1" type="checkbox" onchange="console.log('changed');">
<span></span>
</label>
<label class="checkbox">
<i class="fas fa-industry"></i><a class="icontext">Potravinový priemysel</a>
<input id="check1" type="checkbox" onchange="console.log('changed');">
<span></span>
</label>
<label class="checkbox">
<i class="fas fa-recycle"></i><a class="icontext">Recyklovanie</a>
<input id="check1" type="checkbox" onchange="console.log('changed');">
<span></span>
</label>
<div class="divbtnfilter">
<a class="btnfilter">Filtrovať</a>
</div>
</div>
</div>
CSS
/* Checkboxes */
body:not(#foo) input[type='checkbox'] {
opacity: 0;
}
.checkbox, .radio {
position: relative;
cursor: pointer;
padding: 1em;
display:inline-block;
}
.checkbox::-moz-selection, .radio::-moz-selection {
background: transparent;
}
.checkbox::selection, .radio::selection {
background: transparent;
}
.checkbox input + span, .radio input + span {
border: 1px solid black;
background: white;
content: "";
display: inline-block;
margin: 0 .5em 9px 0;
padding: 0;
vertical-align: middle;
width: 1em;
height: 1em;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
}
.checkbox input + span::after, .radio input + span::after {
content: "";
display: block;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .2s;
transition: -webkit-transform .2s;
transition: transform .2s;
transition: transform .2s, -webkit-transform .2s;
}
@media screen and (min-width: 768px) {
.checkbox:hover input + span, .radio:hover input + span {
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
}
.checkbox input:active + span, .radio input:active + span {
-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.checkbox input:focus + span, .radio input:focus + span {
-webkit-box-shadow: 0 0 0 3px lightblue;
box-shadow: 0 0 0 3px lightblue;
}
.checkbox input:checked + span::after, .radio input:checked + span::after {
-webkit-transform: scale(1);
transform: scale(1);
}
.checkbox input, .radio input {
position: absolute;
cursor: pointer;
opacity: 0;
}
.checkbox input + span {
border-radius: 2px;
}
.checkbox input + span::after {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTMuNzA3LDMyLjI5MyAxMi4yOTMsMzMuODU0IDI0LjI5Myw0NiAyNS43MDcsNDYgNDkuNzA3LDIxLjg1NCA0OC4yOTMsMjAuMzY2IDI1LDQzLjYyMyAiLz48L2c+PC9zdmc+) no-repeat center;
background-size: contain;
width: 1em;
height: 1em;
}
.radio input + span {
border-radius: 100%;
}
.radio input + span::after {
border-radius: 100%;
margin: .65em;
width: .75em;
height: .75em;
}
.radio input:checked + span::after {
background: black;
}
Aucun commentaire:
Enregistrer un commentaire