?? ?? ??? ??? ?????. 2. CSS? ??? ?? ???? ????. ?? ?? ??? ??? ??? ??? ???? ??? ?? ?? ???? ??? ??? ??? ???? ???? ??? ??? ??? ?? ??? ??? ??????.

CSS? ??? ?? ??? ??? ??? ?? ???? ????? ??? ??? ??? ????? ?? ?????. ??? ?? ??? ??? ??? CSS? ???? ?? ??? ?? ??? ?????? ????. ???? ???? ??? ??? ????.

1 ?? 1 : ?? HTML ??

??? ?? ?? ?? ???? ??????. ?? ?? ???? ???? ???? ?? ?? ? ????.

 <label class = "Custom-Radio">
  <?? ?? = "radio"name = "??"value = "?? 1">
  <span class = "Radio-Indicator"> </span>
  ?? 1
</???>

<label class = "Custom-Radio">
  <?? ?? = "radio"name = "??"value = "?? 2">
  <span class = "Radio-Indicator"> </span>
  ?? 2
</???>

? ?? 2 : ?? ??? ??? ? ???

CSS? ???? ?? ??? ????? ?? ??? ?? (? : ??? ??? ??) ?? ??? ? ???.

 .Custom-Radio ?? {
  ?? : ??;
  ???? : 0;
  ?? : ???;
  ?? : 0;
  ?? : 0;
}

??? ??? ????? ??? ?? ?????.

? 3 ?? : ???? ??? ?? ???

?? span.radio-indicator ??? ??? ???? ???? ????????.

 .Radio-Indicator {
  ?? : 18px;
  ?? : 18px;
  ?? : 2px Solid #999;
  ??-???? : 50%;
  ????? : ??? ??;
  ?? ??? : 8px;
  ?? : ??;
  ?? : ?? 0.2 ?? ???;
}

? 4 ?? : ??? ?? ?? ??????

:checked ?? ???? ??????.

 .Custom-Radio Input : ?? ~ .Radio-Indicator :: ?? {
  ???: "";
  ?? : ??;
  ?? : 50%;
  ?? : 50%;
  ?? : ?? (-50%, -50%);
  ?? : 10px;
  ?? : 10px;
  ??? : #007bff;
  ??-???? : 50%;
  ?? : ?? 0.2S ??;
}

??? ???? ???? ??? ??? ?? ?????.

? 5 ?? : ?? ? ??? ?? ?? (?? ????? ??)

??? ????? ???? ??????.

 .Custom-Radio : ?? ?? ~ .Radio-Indicator {
  ?? ? : #007bff;
}

.Custom-Radio Input : Focus ~ .Radio-Indicator {
  Box-Shadow : 0 0 3PX RGBA (0, 123, 255, 0.3);
}

? ?? ??

• ??? : ?? <input> ??? ???? ???? ??? ???? ??? ?? ? ??? ?????? ????? ?????.
• ??? ???? :? ??? ?? ??? ?????? ?????.
• ??? ?? : ???? ????? ??, ?? ? ?????? ?? ??? ? ????.

? ?? ?

• ?? ?? ?? em ?? rem Unit? ??????.
• ??? ?? ??? ??? ??????.

   .Custom-Radio ?? : ???? ~ .Radio-Indicator {
    ?? ? : #CCC;
    ??? : #f0f0f0;
    ?? : ?? ????.
  }

• ??? ??? ?? CSS ??? ???? ?? ??????.

---

?? ??! ?? ???? ??? ???? ??? ??? ??? ??? ????. ????? ?? ??? ??? ???? ??? ??? ?? ???? ??????. ????? ??? ??????.

? ??? CSS? ??? ?? ??? ??? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!