Skip to content

Instantly share code, notes, and snippets.

@alt-karate
Created March 23, 2022 08:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alt-karate/261adc6018893c4abd1dd6cb51ca3267 to your computer and use it in GitHub Desktop.
Save alt-karate/261adc6018893c4abd1dd6cb51ca3267 to your computer and use it in GitHub Desktop.
<label class="radio">
<input name="stores_charge" class="radio_input" type="radio" checked>
<span class="radio_text">全て</span>
</label>
.radio {
margin-right: 1rem;
}
.radio_input {
appearance: none;
position: absolute;
}
.radio_text::before {
content: "";
display: block;
border-radius: 50%;
border: 1px solid #fa684b;
width: 16px;
height: 16px;
margin-right: 0.5rem;
}
.radio_text:hover {
cursor: pointer;
}
.radio_text {
position: relative;
display: inline-flex;
align-items: center;
}
.radio_input:checked + .radio_text::after {
content: "";
position: absolute;
left: calc(8px - 5px);
display: block;
border-radius: 50%;
width: 10px;
height: 10px;
background-color: #fa684b;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment