0

как сверстать такое? я сделала что-то похожее, но что-то не работаетвот фото

3
  • @MaximLensky это же совсем другое 27 июн 2019 в 13:20
  • 1
    Это я дуркую просто, а что там ? просто блок как и моём примере хотя я могу ошибаться 27 июн 2019 в 13:23
  • 1
    Сам чекбокс у вас стилизовать не получится, можно его скрыть а в label добавить квадрат с галочкой. 27 июн 2019 в 13:58

2 ответа 2

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>

7
  • а при появлении галочки как сменить цвет галочки и ёё фон? просто впервые с таким сталкиваюсь 27 июн 2019 в 15:51
  • в css это active и checked 27 июн 2019 в 16:03
  • еще такой вопрос: как уменьшить галочку? и как оставить ее активной? чтобы уже галочка была, не нажимая 27 июн 2019 в 16:50
  • @VictoriaPisareva там два состояния до нажатия и после, в общем transform: scale в обоих случаях 27 июн 2019 в 16:51
  • о, да. это влияет на само поле с галочкой, но саму её не получается меньше сделать 27 июн 2019 в 16:55
1

На сколько я понял, то ваша цель стилизовать чекбокс. Обратите внимание на такое решение 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.