0

input:hover, input:focus, input:active, input:visited {
  outline: 0 none !important;
}


.deletition label input {
  display: none;
}

.deletition label:checked, .deletition label:hover, .deletition label:focus,  {
  border: 1px solid #e34cac;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  opacity: 1;
}

.deletition label  {
  border: 1px solid #e3dae7;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  cursor: pointer;
  margin-right: 10px;
}

.deletition label .deletition label:checked, .deletition label:hover, .deletition label:focus {
  width: 30px;
  height: 30px;
}

.deletition i  {
  width: 20px;
  height: 20px;
  opacity: .25;
}


.deletition label:checked, .deletition label:hover, .deletition label:focus, .status label:checked, .status label:hover, .status label:focus {
  border: 1px solid #e34cac;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  opacity: 1;
}

.deletition label, .deletition label:checked, .deletition label:hover, .deletition label:focus{
  width: 30px;
  height: 30px;
}

.deletition label {
  border: 1px solid #e3dae7;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  cursor: pointer;
  margin-right: 10px;
}


.deletition label input:checked + i, .deletition label input:hover + i, .deletition label input:focus + i, .status label input:checked + i, .status label input:hover + i, .status label input:focus + i {
  opacity: 1;
  -webkit-transition: opacity .4s ease;
  -o-transition: opacity .4s ease;
  -moz-transition: opacity .4s ease;
  transition: opacity .4s ease;
}


.statusDelete {
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  background-position: center;
}


.deletition i, .deletition label {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}



.deletition i, .deletition label, {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
<div class="deletition">


<label><input type="checkbox" name="dele" value="delte" form="tasks"><i class="statusDelete" style="  background-image: url('https://vignette.wikia.nocookie.net/ecu-official/images/1/10/%D0%9A%D1%80%D0%B5%D1%81%D1%82%D0%B8%D0%BA.png/revision/latest?cb=20131124160455&path-prefix=ru');"></i></label>
 

                    <input type="hidden" name="id" value="id">
                </div>

1 ответ 1

2

У label нет псевдокласса :checked, так как атрибут checked используется для input. Что бы изменять состояние label в зависимости от input, нужно использовать js или вынести input перед label и использовать псевдокласс input:checked + label.

1
  • а с помощью JS что делать нужно можете подскахать?
    – dpi
    27 авг 2018 в 9:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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