Как красиво оформить 1000 переключателей? - PullRequest
Новая
       0

Как красиво оформить 1000 переключателей?

0 голосов
/ 18 января 2020

Мне нужно красиво оформить «выключатели». Нашел пример на одном сайте. Как я могу сделать то же самое? Пожалуйста, дайте ссылку на похожий пример. 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Switches</title>
 </head>
 <body>
  <form>
    <p><input name="tech" type="radio" value="computer" checked>compute</p>
    <p><input name="tech" type="radio" value="xbox">xbox</p>
    <p><input name="tech" type="radio" value="playstation">playstation</p>
    <p><input name="tech" type="radio" value="Game">Game</p>
    <p><input name="tech" type="radio" value="TV">TV</p>

  </form> 
 </body>
</html>

Вот пример того, что я хочу получить. enter image description here

1 Ответ

1 голос
/ 18 января 2020

Вы можете сделать это следующим образом.

Вы прячете радиокружок, но если вы выбираете его (по метке), вы меняете стиль метки. 

input{
    display: none;
}

input + label{
    font-size: 14px;
    border: #9c94bb 1px solid;
    width: 130px;
    background-color: #ffffff;
    transition: background-color .3s;
    color: #000000;
    text-align: center;
    padding: 7px 0;
    display: inline-block;
    margin-right: 10px;
}

input:checked + label{
    background: #ece8ff;
}

form{
    display: flex;
}
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Switches</title>
</head>
<body>
  <form>
    <p>
      <input name="tech" type="radio" value="computer" id="computer" checked>
      <label for="computer">computer</label>
    </p>
    <p>
      <input name="tech" type="radio" value="xbox" id="xbox">
      <label for="xbox">xbox</label>
    </p>
    <p>
      <input name="tech" type="radio" value="playstation" id="playstation">
      <label for="playstation">playstation</label>
    </p>
    <p>
      <input name="tech" type="radio" value="Game" id="game">
      <label for="game">Game</label>
    </p>
    <p>
      <input name="tech" type="radio" value="TV" id="tv">
      <label for="tv">TV</label>
    </p>
  </form> 
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...