Как превратить флажок в кнопку - PullRequest
Новая
       89

Как превратить флажок в кнопку

1 голос
/ 30 мая 2020

Я пытаюсь достичь этого с помощью только css и сделать его интерактивным / активным, ответы не были такими полезными, какова будет часть специфичности css? enter image description here

#ck-button {
  margin-bottom: 1rem;
}

#ck-button label {
  width: 85%;
  border: 2px solid #eaf2fd;
  padding: 15px;
  border-radius: 3px;
  display: flex;
}

#ck-button label span {
  padding: 3px 0px;
}
#ck-button .title {
  color: #304256;
  font-weight: 600;
  font-size: 1em;
}
#ck-button .description {
  color: #6984a3;
  font-weight: 400;
  margin-left: 7px;
  font-size: 15px;
}
#ck-button label input {
  position: absolute;
  top: -20px;
}
<div id="ck-button">
    <label id="label">
        <input id="checkbox" type="checkbox" value="1" />
        <span className="title">Respirators</span>
        <span className="description">
            Surgical N95 or equivalent
        </span>
    </label>
</div>

это ссылка на js скрипку для правильного вида https://jsfiddle.net/oLa4162h/

1 Ответ

1 голос
/ 30 мая 2020

Вы можете получить это так, используя + CSS Комбинатор смежных братьев в сочетании с :checked CSS селектором для checkbox, обратите внимание, что я сделал небольшое изменение в HTML и css, я добавил контейнер div прямо рядом с <input> и применил к нему CSS: 

#ck-button {
  margin-bottom: 1rem;
}

#ck-button .container {
  width: 85%;
  border: 2px solid #eaf2fd;
  padding: 15px;
  border-radius: 3px;
  display: flex;
}

#ck-button label span {
  padding: 3px 0px;
}
#ck-button .title {
  color: #304256;
  font-weight: 600;
  font-size: 1em;
}
#ck-button .description {
  color: #6984a3;
  font-weight: 400;
  margin-left: 7px;
  font-size: 15px;
}
#ck-button label input {
  position: absolute;
  top: -20px;
}

#checkbox:checked + .container {
  border: 2px solid #2F81ED;
  color: #2F81ED;
  background-color: #F5F8FD;
}
<div id="ck-button">
  <label id="label">
    <input id="checkbox" type="checkbox" value="1" />
    <div class="container">
      <span className="title">Respirators </span>
      <span className="description">
        Surgical N95 or equivalent
      </span>
    </div>
  </label>
</div>
...