как сверстать такое? я сделала что-то похожее, но что-то не работает
-
@MaximLensky это же совсем другое– Victoria Pisareva27 июн 2019 в 13:20
-
1Это я дуркую просто, а что там ? просто блок как и моём примере хотя я могу ошибаться– Monkey Mutant27 июн 2019 в 13:23
-
1Сам чекбокс у вас стилизовать не получится, можно его скрыть а в label добавить квадрат с галочкой.– Дмитрий Горный27 июн 2019 в 13:58
Добавить комментарий
|
2 ответа
Готовый вариант
* {
padding: 0;
margin: 0;
}
.check {
border: 2px solid #ccc;
display: inline-block;
padding: 6px;
border-radius: 4px;
outline: none;
transition: 0.34s;
cursor: pointer;
transform: scale(0.7);
}
.check .fas {
font-size: 28px;
color: #ccc;
transform: scale(0.8);
transition: 0.24s 0.34s cubic-bezier(0, 0.99, 0.54, 0.33);
opacity: 0;
}
.checked {
border: 2px solid #fff;
animation: blind 0.34s linear;
transform: scale(0.9);
}
@keyframes blind {
0% {
transform: scale(0.2);
}
100% {
transform: scale(0.9);
}
}
.fas.active {
color: #fff;
opacity: 1;
transform: scale(0.8);
}
.items {
display: flex;
padding: 50px 80px;
background-color: #00B6BA;
color: #fff;
width: 480px;
margin: 30px auto;
}
.items a {
color: #ffc00f;
}
.item:nth-of-type(1) {
width: 90px;
}
#checkbox {
display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<div class="items">
<div class="item">
<form action="">
<label for="checkbox">
<div id="check" class="check" >
<i id="fas" class="fas fa-check"></i>
</div>
<input type="checkbox" id="checkbox">
<label>
</form>
</div>
<div class="item">
<p>
Регистрируясь в системе, я принимаю<br>
<a href="#">Условия соглашения</a>,<a href="#">Политики конфиденциальности</a><br>
и даю согласие на <a href="#">обработку персональных данных.</a>
</p>
</div>
</div>
<script>
var check = document.getElementById("check");
var fas = document.getElementById("fas");
check.onclick = function (){
this.classList.toggle("checked");
fas.classList.toggle("active");
}
</script>
-
а при появлении галочки как сменить цвет галочки и ёё фон? просто впервые с таким сталкиваюсь 27 июн 2019 в 15:51
-
-
еще такой вопрос: как уменьшить галочку? и как оставить ее активной? чтобы уже галочка была, не нажимая 27 июн 2019 в 16:50
-
@VictoriaPisareva там два состояния до нажатия и после, в общем transform: scale в обоих случаях 27 июн 2019 в 16:51
-
о, да. это влияет на само поле с галочкой, но саму её не получается меньше сделать 27 июн 2019 в 16:55
На сколько я понял, то ваша цель стилизовать чекбокс. Обратите внимание на такое решение https://codepen.io/seskew/pen/uByGK. Идея такая, чтобы сам чекбокс прятать и вместо него отображать одну из двух картинок.
body {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
line-height: 20px;
}
/* checkboxes */
label {
cursor: pointer;
display: inline-block;
position: relative;
padding-left: 25px; /* 10 px padding right + 15px input type*/
margin-right: 10px; /* margin between inputs types */
}
label:before {
content: "";
width: 15px;
height: 15px;
position: absolute;
left: 0;
}
input[type=checkbox] {
display: none;
}
.checkbox label:before {
background: url('http://i36.photobucket.com/albums/e22/lilsq3/checkbox_small.png') left center no-repeat;
margin-top: 2px;
}
input[type=checkbox]:checked + label:before {
background: url('http://i36.photobucket.com/albums/e22/lilsq3/checkbox_selected_small.png') left center no-repeat;
}
<div class="checkbox">
<input id="check1" type="checkbox" name="check" value="check1">
<label for="check1">Checkbox One</label>
<br>
<input id="check2" type="checkbox" name="check" value="check2">
<label for="check2">Checkbox Two</label>
</div>