在输入类型=“无线电”中，如何更改DE样式并将标签置于居中？

Question

我想设计一个调查类型组件，在该组件中，用户可以从1到5中选择一个选项，我正在使用无线电输入类型，我想给它一种自定义样式：

我希望输入显示为正方形（由于默认情况下它们是圆圈） 我希望标签在输入无线电广场内。

import React from 'react'

import './PreguntaCerradaEncuesta.css'

function PreguntaCerradaEncuesta({preguntaCerrada}) {
  return (
    <div className='contenedorPreguntaCerradaEncuesta'>
    <div className='textoPreguntaCerradaEncuesta'> {preguntaCerrada} </div>

    <div>


    
      <label for="contactChoice1">  
      
      <input type="radio" id="cal1"
       name="Calificacion" value='1'  checked/> 1

      </label>


      <input type="radio" id="cal2"
       name="Calificacion" value='2' checked/>
      <label for="contactChoice1"> 2 </label>

      <input type="radio" id="cal3"
       name="Calificacion" value='3' checked/>
      <label for="contactChoice1"> 3 </label>

      <input type="radio" id="cal4"
       name="Calificacion" value='4' checked/>
      <label for="contactChoice1"> 4 </label>

      
      <input type="radio" id="cal5"
       name="Calificacion" value='5' checked/>
      <label for="contactChoice1"> 5 </label>

      

    </div>



</div>
)
  
}

export default PreguntaCerradaEncuesta

preguntacerradaencuesta.css

.contenedorPreguntaCerradaEncuesta{
    display: flex;
    flex-direction: column;
    justify-content: flex-start ;

    width: 60%;
    height: 100%;

    gap: 10px;


}

.textoPreguntaCerradaEncuesta{
    font-size: 20px;
}

.contenedorPreguntaCerradaEncuesta label {
    display: inline-block;
    margin-right: 15px;
    line-height: 32px;
  }

  .contenedorPreguntaCerradaEncuesta input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

  
    border-radius: 100%;
    width: 50px;
    height: 50px;
  
    background-color: #E5E5E5;
    transition: 0.2s all linear;
  
    position: relative;
    
  }
  
.contenedorPreguntaCerradaEncuesta input:checked {
    background-color: #1624DA;
  }

Answer 1

您必须手动定位它。例如，

      <span
        style={{
          position: "relative",
          left: "-32px",
          top: "-22px",
          fontSize: "15px"
        }}
      >
        2
      </span>

由于您的输入的大小为50px x 50px。找到其中的中心不应该太难了。

代码：