如何设置带有文字的单选按钮的样式

Question

我试图对收音机按钮进行以下效果，但我不确定这样做的最佳方法是什么

我已尝试使用css隐藏按钮，当我想检查它们时，值不会发送到服务器。

我也尝试过使用类似的jquery，但它也不起作用。

$(document).ready(function () {
   $('.radio').each(function () {
      $(this).css("visibility", "hidden");
   });
});

所以，如果有人能告诉我这种效果的最佳方式。

非常感谢Anykind的帮助

Answer 1

诀窍是隐藏输入本身，并在输入为+

时使用:checked和span选择器来装饰输入的:checked兄弟

＆＃13;

＆＃13;

div {
  border-top:1px solid #A6A6A6;  
  border-bottom:1px solid #A6A6A6;  
  padding:15px 0;
  display:inline-block;
}

ul {
  padding:0;
  margin:0;
  font-family:arial;
}

li {
  list-style:none;
  display:inline-block;
  font-size:12px;
}

span {
  color:#009ACE;
  padding:5px;
  cursor:pointer;
  font-weight:bold;
  transition:all .2s ease;
  font-size:14px;
}

input {
  display:none;  
}

input:checked + span {
  background:#009ACE;
  color:#fff;
}

＆＃13;

<div>
  <ul>
    <li>
      Size
    </li>
    <li>
      <label>
        <input type="radio" name="size" checked />
        <span>S</span>
      </label>
    </li>
    <li>
      <label>
        <input type="radio" name="size" />
        <span>M</span>
      </label>
    </li>
    <li>
      <label>
        <input type="radio" name="size" />
        <span>L</span>
      </label>
    </li>
    <li>
      <label>
        <input type="radio" name="size" />
        <span>XL</span>
      </label>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我自己的方法是使用样式化的<form>（显然是内容），利用:checked伪类来设置字母的样式：

＆＃13;

＆＃13;

fieldset {
  border-left-width: 0;
  border-right-width: 0;
}

legend {
  /*
    to move the <legend> element to the beginning
    of the row containing the <label> and <input>
    elements: */
  float: left;

  /*
    to vertically centre the text of the element: */
  line-height: 2em;
}

legend ~ input[type=radio] {
  /*
    to allow the <input> elements to be visually
    removed from the page: */
  position: absolute;
  left: -10000px;
}

label {
  /*
    to clearly imply interactivity: */
  cursor: pointer;
  display: inline-block;
  width: 2em;
  height: 2em;
  background-color: #fff;
  color: skyblue;
  font-weight: bold;
  text-align: center;
  /*
    to vertically centre the text:
  */
  line-height: 2em;
  margin: 0 0.5em;
  border-radius: 0.5em;
}

/*
  to style the <label> elements that are
  adjacent to a checked radio <input>: */
input[type=radio]:checked + label {
  color: #fff;
  background-color: skyblue;
}

＆＃13;

<form action="">
  <fieldset>
    <legend>Size</legend>
    <input id="sizeSmall" value="small" type="radio" name="size">
    <label for="sizeSmall">S</label>
    <input id="sizeMedium" value="medium" type="radio" name="size">
    <label for="sizeMedium">M</label>
    <input id="sizeLarge" value="large" type="radio" name="size">
    <label for="sizeLarge">L</label>
    <input id="sizeXLarge" value="xLarge" type="radio" name="size">
    <label for="sizeXLarge">XL</label>
  </fieldset>
</form>

＆＃13;

＆＃13;

＆＃13;