自定义单选按钮填充答案

【问题标题】：Custom Radio button padding自定义单选按钮填充
【发布时间】：2018-12-17 14:06:22
【问题描述】：

我正在尝试做一个自定义单选按钮，我在互联网上找到了一些代码，并对其进行了自定义。问题是，我需要在标签中左/右填充 20px，并且我需要将最小宽度保持在 110px，并且 li 宽度不包含内容...

如果你想看，他就是我的密码。

.ui-radio {
    margin:25px 0 0 0;
    padding:0;
}

.ui-radio li {
    float:left;
    margin:0 20px 0 0;
    min-width:110px;
    height:40px;
    position:relative;
    list-style-type: none;
}

.ui-radio label, .ui-radio input {
   display:block;
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
}

.ui-radio input[type="radio"] {
   opacity:0;
   z-index:100;
}

.ui-radio input[type="radio"]:checked + label {
   border-bottom: solid 4px BLUE;
}

.ui-radio label {
    padding:5px;
    cursor:pointer;
    z-index:90;
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);
    padding:0 20px;
    line-height:30px;
    border-radius:2px;
}

.ui-radio label:hover {
    background:#DDD;
}

<ul class="ui-radio">
        <li>
            <input type="radio" id="choice1" name="personnel" />
            <label for="choice1">Long_choice_1</label>
        </li>
        <li>
            <input type="radio" id="choice2" name="personnel" />
            <label for="choice2">choice_2</label>
        </li>
</ul>

【问题讨论】：

您可以查看我对自定义单选按钮的回答stackoverflow.com/questions/45259139/…

标签： html css

【解决方案1】：

从.ui-radio label, .ui-radio input 中删除position: absolute;。

绝对定位导致项目的父项不知道内容大小，这就是内容溢出的原因。

【讨论】：

【解决方案2】：

标签的默认显示是“内联”。首先你应该把他的显示改为 "inline-block" , "block" 或 ...

例如：

html：

<!DOCTYPE html>
<html>

<head>
  <link class="menu-bar" rel="stylesheet" href="../css/index.css">
  <link class="container" rel="stylesheet" href="../css/menu.css">
  <meta charset="utf-8">
  <title>Cipher Program</title>
</head>

<body>
  <ul class="ui-radio">
    <li>
      <input type="radio" id="choice1" name="personnel" />
      <label for="choice1">Long_choice_1</label>
    </li>
    <li>
      <input type="radio" id="choice2" name="personnel" />
      <label for="choice2">choice_2</label>
    </li>
  </ul>
</body>

</html>

css：

body {
  overflow: hidden;
  background: #8e2de2;
  background: -webkit-linear-gradient(to right, #4a00e0, #8e2de2);
  background: linear-gradient(to right, #4a00e0, #8e2de2);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
body .ui-radio {
  display: inline-flex;
  flex-direction: column;
}
body .ui-radio li {
  margin-bottom: 10px;
  border-radius: 5px;
  background: #fff;
  list-style: none;
}
body .ui-radio li input[type="radio"] {
  position: absolute;
  visibility: hidden;
}
body .ui-radio li input[type="radio"]:checked ~ label::before {
  background: #990099;
}
body .ui-radio li label {
  cursor: pointer;
  min-width: 110px;
  display: flex;
  align-items: center;
  padding: 10px;
}
body .ui-radio li label::before {
  transition: background ease 0.2s;
  content: "";
  border-radius: 50%;
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 10px;
  border: 3px solid #777;
  box-sizing: border-box;
}

【讨论】：