html css input自定义 

完整的代码, 可以复制引用


<!DOCTYPE html>
<html>

<head>
  <!-- 设置字符编码为UTF-8 -->
  <meta charset="utf-8">
  <!-- 为IE浏览器设置兼容模式，优先使用最新的引擎渲染网页 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <!-- 设置视窗属性，优化移动设备显示 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <style>
    /* 重置所有元素的内外边距 */
    *{
      padding:0;
      margin:0;
    }
    /* 设置"creatAccountInput"类的样式 */
    .creatAccountInput{
      position:relative;  /* 设置为相对定位 */
      display:inline;     /* 设置为内联显示，使其与其他元素在同一行 */
    }
    /* 当单选按钮未选中时，其后的标签的样式 */
    .radioi + .radio-label:before{
      display:inline-block;  /* 设置为内联块级元素 */
      vertical-align:text-bottom;  /* 设置垂直对齐方式为文本底部 */
      margin:0 .2rem 0 .5rem;  /* 设置外边距 */
      content: "\a0";  /* 设置内容为空格 */
      font-size:.5rem;  /* 设置字体大小 */
      width: .4rem;  /* 设置宽度 */
      height: .4rem;  /* 设置高度 */
      border-radius: 50%;  /* 设置边框为圆形 */
      border: 1px solid #D81E06;  /* 设置边框颜色和大小 */
      text-indent: .15em;  /* 设置文本缩进 */
      padding:.05rem;  /* 设置内边距 */
    }
    /* 当单选按钮被选中时，其后的标签的样式 */
    .radioi:checked + .radio-label:before {
      background-color: #D81E06;  /* 设置背景颜色 */
      background-clip: content-box;  /* 设置背景裁剪为内容框 */
    }
    /* 隐藏原始的单选按钮 */
    .radioi{
      display: none;  /* 设置为不显示 */
    }
  </style>
</head>

<body>
<!-- 创建一个单选按钮和对应的标签 -->
<p class="creatAccountInput">
  <input type="radio" name="radio" value="0" checked class="radioi" id="radio1">  <!-- 单选按钮，已默认选中 -->
  <label for="radio1" class="radio-label">代理类型</label>  <!-- 对应的标签 -->
</p>
<!-- 创建另一个单选按钮和对应的标签 -->
<p class="creatAccountInput">
  <input type="radio" name="radio" value="1" class="radioi" id="radio2">  <!-- 单选按钮 -->
  <label for="radio2" class="radio-label">玩家类型</label>  <!-- 对应的标签 -->
</p>

</body>

</html>

posted on 2021-10-27 15:59  完美前端  阅读(334)  评论(0)    收藏  举报

导航