Create title selection with radio buttons

by Tan

HTML

<div class="flex_radio_group">

<label>
    <input type="radio" name="title">
    <span>Mr</span>
</label>
<label>
    <input type="radio" name="title">
    <span>Mrs</span>
</label>
<label>
    <input type="radio" name="title">
    <span>Ms</span>
</label>
<label>
    <input type="radio" name="title">
    <span>Miss</span>
</label>
<label>
    <input type="radio" name="title">
    <span>Dr</span>
</label>
<label>
    <input type="radio" name="title">
    <span>Other</span>
</label>

</div>



<fieldset class="flex_radio_group">
  <legend>Which is the best color?</legend>
 <label>
    <input type="radio" name="title">
    <span>Mr</span>
</label>
<label>
    <input type="radio" name="title">
    <span>Mrs</span>
</label>
<label>
    <input type="radio" name="title">
    <span>Ms</span>
</label>
<label>
    <input type="radio" name="title">
    <span>Miss</span>
</label>
<label>
    <input type="radio" name="title">
    <span>Dr</span>
</label>
<label>
    <input type="radio" name="title">
    <span>Other</span>
</label>
</fieldset>




<br><br><br><br>

<input type="tel" id="phone" name="phone_number" placeholder="555-555-5555" pattern="\d{3}-\d{3}-\d{4}" onkeyup="this.value = this.value.replace(/[^0-9.,]/g, '');">

CSS

.flex_radio_group {all: unset;
display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    gap:9px;
    }
.flex_radio_group label {background-color:white;width:80px;}

.flex_radio_group label {
  position: relative;
  cursor: pointer;
}

.flex_radio_group label [type="radio"] {
  display: none;
}

.flex_radio_group label [type="radio"]+span {
  display: block;padding:9px 0;text-align:center;
border:1px solid #bbbbbb;border-radius:5px;
}

.flex_radio_group label [type="radio"]:checked+span {
  background: #e2e4e6;
  display: block;
}


    @media (max-width: 480px) {
.flex_radio_group label {width:calc(33.33% - 6px);}
    }

JavaScript

document.addEventListener('click', function(e) {
if (!e.target.matches('#one, #three, #five')) return;
e.target.addEventListener('blur', function() {
e.target.value = capitalizeFirstLetter(e.target.value);
});
});
function capitalizeFirstLetter(e) {
return e.charAt(0).toUpperCase() + e.slice(1);
}