Estilizar input tipo radio com CSS puro

2a atrás

O primeiro radio é nativo, difícil de ser customizado, o segundo é totalmente customizável com #CSS.

Primeiro, adicione no seu HTML um input tipo radio nativo:

<input type="radio">

Agora no CSS, vamos tirar toda a aparência padrão do input e definir um tamanho para ele:

.custom {
  appearance: none;
  height: 1.25em;
  position: relative;
  width: 1.25em;
}

Em seguida, vamos utilizar os pseudo-elementos before e after para fazer a parte externa e interna do radio respectivamente.

O código completo ficará assim:

<!DOCTYPE html>
<html>
<head>
<style>
  input[type='radio'] {
    appearance: none;
    height: 1.25em;
    position: relative;
    width: 1.25em;
  }

  input[type='radio']::after, input[type='radio']::before {
    border-radius: 50%;
    position: absolute;
  }
    
  input[type='radio']::after {
    background-color: #000000;
    content: '';
    height: 50%;
    left: 25%;
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.2s;
    top: 25%;
    width: 50%;
  }
    
  input[type='radio']::before {
    border: 2px solid #000000;
    box-sizing: border-box;
    content: '';
    height: 100%;
    width: 100%;
  }
    
  input[type='radio']:checked::after {
    transform: scale(1);
  }
</style>
</head>
<body>
  <input type="radio">
</body>
</html>

Comentários (0)