Как сделать красивый чекбокс?

Frontend developer HTML / CSS
1

Хочу сделать красивые чекбоксы, которые будут не квадратиками в которые ставят точки а например прямоугольниками на которые я клацаю и они начинают подсвечиваться при выборе.

2

Легче всего будет скрывать checkbox и стилизовать лейблы. Вот так выглядит код:

<input type="checkbox" id="design" />
<label for="design">Дизайн
 
<input type="checkbox" id="verstka" />
<label for="verstka">Верстка
 
<input type="checkbox" id="razrabotka" />
<label for="razrabotka">Разработка

input {
  display: none;
}
 
label {
  padding: 5px;
  background-color: silver;
  cursor: pointer;
}
 
#design:checked ~ label[for="design"],
#verstka:checked ~ label[for="verstka"],
#razrabotka:checked ~ label[for="razrabotka"]{
  background-color: yellow;
}

Или можно сделать таким способом с bootstrap:

<div class="container">

    <div class="row">

        <div class="col-md-4">

            
Пример

        


            <div class="col-md-8">

        <label for="default" class="btn btn-default">Обычный <input type="checkbox" id="default" class="badgebox"><span class="badge">