<p>accent-color</p>
  <div class="container">    
    <input type="radio" name="fruit2" id="apple2" checked><label for="apple2" >사과</label>
    <input type="radio" name="fruit2" id="banana2"><label for="banana2">바나나</label>
    <input type="radio" name="fruit2" id="orange2"><label for="orange2">오렌지</label>
  </div>

<br>
<p>custom</p>
  <div class="container">
    <input type="radio" name="fruit" id="apple" class="custom" checked><label for="apple" >사과</label>
    <input type="radio" name="fruit" id="banana" class="custom"><label for="banana">바나나</label>
    <input type="radio" name="fruit" id="orange" class="custom"><label for="orange">오렌지</label>
  </div>


  
.container {
  display: flex;
  align-items: center;
  width: 500px;
}

.container label {
  margin-right: 20px;
}

/* 체크되지 않았을 때의 스타일 */
input[type=radio].custom {
  appearance: none; /* 기본 스타일 제거 */
  width: 20px;
  height: 20px;
  border: 1px solid gray; /* 테두리 색상 */
  border-radius: 50%; /* 테두리를 동그랗게 넣기 위한 속성 */
  background-color: #eee; /* 배경 색상 */
  outline: none; /* focus되었을때 표시되는 테두리 */
}

/* 체크된 경우 스타일 */
input[type=radio].custom:checked {
  background-color: tomato; /* 체크할 경우 표시되는 안쪽 원 */
  border: 3px solid #eee; /* 바깥 테두리 아님. 테두리와 원 사이의 공간에 표시됨*/
  box-shadow: 0 0 0 1px cornflowerblue; /* 바깥 테두리. 그림자로 직접 그림*/
}

input[type=radio] {
  accent-color: tomato;
  width: 20px;
  height: 20px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.