mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
57 lines
1.3 KiB
HTML
57 lines
1.3 KiB
HTML
<div class="radio-input">
|
|
<input class="value-radio" name="value-radio" id="option-1" type="radio">
|
|
<label class="value-radio-label" for="option-1">Option A</label>
|
|
|
|
<input class="value-radio" name="value-radio" id="option-2" type="radio">
|
|
<label class="value-radio-label" for="option-2">Option B</label>
|
|
|
|
<input class="value-radio" name="value-radio" id="option-3" type="radio">
|
|
<label class="value-radio-label" for="option-3">Option C</label>
|
|
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by ChristosMourgelas - Tags: radio */
|
|
.radio-input {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.value-radio {
|
|
display: none;
|
|
}
|
|
|
|
.value-radio-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
border: 2px solid #4d4d4d;
|
|
border-radius: 20px;
|
|
color: #ccc;
|
|
background-color: #333;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.value-radio:checked + .value-radio-label {
|
|
border-color: #00b4ff;
|
|
background-color: #00b4ff;
|
|
color: #fff;
|
|
}
|
|
|
|
.value-radio-label::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
border: 2px solid #4d4d4d;
|
|
transition: all 1s;
|
|
}
|
|
|
|
.value-radio:checked + .value-radio-label::before {
|
|
border-color: #0175a6;
|
|
background-color: #ffffff;
|
|
}
|
|
</style>
|