Custom inputs do not change when clicked

Question

I'm trying to get my custom buttons to change colors when clicked using only HTML/CSS - I have it written so that the outline should turn green but it isn't working (the buttons are being treated like static boxes?).

I'm trying to get something to this effect:

But am getting stuck on styling/how to get the "Not at all" etc text to show.

EDIT: Results with cale_b's changes:

    .radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  width: 5.5vw;
  height:3.8vw;
  border: 1px solid #000000;
  font-family:Avenir Next;
  float: left;
  margin-bottom:5vh;
}

.radio-toolbar p{
  text-align:center;
  margin:auto;
  line-height:3.8vw;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bbb;
}

.radio-cls {
}

<input type="radio" id="1test" name="a">
<label for="1test" class="radio-cls"><p>1</p></label>

<input type="radio" id="2test" name="b">
<label for="2test" class="radio-cls"><p>2</p></label>

<input type="radio" id="3test" name="c">
<label for="3test" class="radio-cls"><p>3</p></label>

<input type="radio" id="4test" name="d">
<label for="4test" class="radio-cls"><p>4</p></label>

Answer 1

Below might be something what you want to acheive

.hello{
  width: 5.5vw;
  height:3.8vw;
  background:white;
  border:1px solid black;

}

.hello:focus{
  
   border: solid 2px green;
}

.hello::-webkit-input-placeholder {
   text-align: center;
   color:black;
   
}

.hello:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
   color:black;
}

.hello::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
   color:black;
}

.hello:-ms-input-placeholder {  
   text-align: center; 
   color:black;
}

<h4>Below might be something what you want to acheive </h4>


<input type="text" class="hello" placeholder="1">
<input type="text" class="hello" placeholder="2" >
<input type="text" class="hello" placeholder="3" >
<input type="text" class="hello" placeholder="4">

Answer 2

Keep to the basics, and this is easy enough.

In the snippet below, I've:

1. Put everything in a container, so I can address it with a css class. This will allow you to style the labels however you like, regardless of other form label styles.
2. Paired the input (which I switched to traditional radio inputs) with the labels (which I switched to traditional labels) using the proper "id" and "for" attributes.
3. Applied styling to show how you can get the appearance you desire.

.radio-control input {
  display: none !important;
}

.radio-control label {
  display: inline-block;
  padding: 10px 15px;
  border: 1px solid #888;
  margin-right: -5px;
}

.radio-control input:checked+label {
  background: #aaa;
}

.radio-control label:first-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.radio-control label:last-of-type {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

<div class="radio-control">
  <input type="radio" id="testa" name="test" value="a">
  <label for="testa">1</label>
  <input type="radio" id="testb" name="test" value="b">
  <label for="testb">2</label>
  <input type="radio" id="testc" name="test" value="c">
  <label for="testc">3</label>
  <input type="radio" id="testd" name="test" value="d">
  <label for="testd">4</label>
</div>

Answer 3

I tried using a slightly different code inside a fieldset

Codepen demo

Markup

<fieldset>
  <input type="radio" name="vote" value="1" id="vote-1" />
  <label for="vote-1">1 <span>Not at all</span></label>

  <input type="radio"  name="vote" value="2" id="vote-2" />
  <label for="vote-2">2</label>

  <input type="radio" name="vote" value="3" id="vote-3" />
  <label for="vote-3">3 <span>Very much</span></label>

</fieldset>

CSS

input { margin: 0; padding: 0; position: absolute; z-index: -1; clip: rect(0,0,0,0); width: 0; top: -100vw;}

fieldset {
   position: relative;
   display: inline-block;
   padding: 0;
   margin: 0;
   border: 1px  #d8d8d8 solid;
   border-radius: 5px;
   font-size: 0;
   white-space: nowrap;
}

label:not(first-of-type) {
  border-left: 1px #d8d8d8 solid; 
}

label {
  cursor: pointer;
  display: inline-block;   
  text-align: center;
  font-size: 2.4rem;
  margin: 0;
  padding: 15px 25px;
}

label span {
  position: absolute;
  top: calc(100% + 1em);
  font-size: .75rem;
}

label:first-of-type span { left: 0; }
label:last-of-type span { right: 0; }

:checked + label {
   background: #f2f1f9;
}

---

Final result