62

我想为捐赠表格设置一组单选按钮，但是我希望它们看起来像按钮而不是圆形表盘。

制作这样的东西的最佳方法是什么？另外，请记住，它必须与 IE8 一起使用。

这是我到目前为止所拥有的，http://jsfiddle.net/YB8UW/ 

.donate-now {
     list-style-type:none;
     margin:25px 0 0 0;
     padding:0;
}

.donate-now li {
     float:left;
     margin:0 5px 0 0;
}

.donate-now label {
     padding:5px;
     border:1px solid #CCC; 
     cursor:pointer;
}

.donate-now label:hover {
     background:#DDD;
}

谢谢

4

6 回答 6

136

它可以用 CSS 完成，而不需要大型框架。我已经用复选框和单选按钮完成了这项工作。

这无需添加新的 HTML 或引入任何 JS 库即可工作。=> jsFiddle

HTML 的新秩序

这是 10 分钟的 hacky 版本，您可以进一步清理它，但它展示了它是多么简单的一个很好的例子。

.donate-now {
  list-style-type: none;
  margin: 25px 0 0 0;
  padding: 0;
}

.donate-now li {
  float: left;
  margin: 0 5px 0 0;
  width: 100px;
  height: 40px;
  position: relative;
}

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

.donate-now input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

.donate-now input[type="radio"]:checked+label,
.Checked+label {
  background: yellow;
}

.donate-now label {
  padding: 5px;
  border: 1px solid #CCC;
  cursor: pointer;
  z-index: 90;
}

.donate-now label:hover {
  background: #DDD;
}
<ul class="donate-now">
  <li>
    <input type="radio" id="a25" name="amount" />
    <label for="a25">$25</label>
  </li>
  <li>
    <input type="radio" id="a50" name="amount" />
    <label for="a50">$50</label>
  </li>
  <li>
    <input type="radio" id="a75" name="amount" checked="checked" />
    <label for="a75">$75</label>
  </li>
  <li>
    <input type="radio" id="a100" name="amount" />
    <label for="a100">$100</label>
  </li>
  <li>
    <input type="radio" id="other" name="amount" />
    <label for="other">other:</label>
  </li>
  <li>
    <input type="text" id="otherAmount" name="numAmount" />
  </li>
</ul>

于 2013-04-26T18:41:35.000 回答
7

编辑： 如果您需要支持 IE 浏览器，这不是解决方案。

您可以使用 CSS 外观属性：

$(':radio').on('change', function() {
  console.log(this.id);
});
input[name=amount] {
  display: none
}

.donate-now {
  list-style-type: none;
  margin: 25px 0 0 0;
  padding: 0;
}

.donate-now li {
  float: left;
  margin: 0 5px 0 0;
}

.donate-now label {
  padding: 5px;
  cursor: pointer;
  -webkit-appearance: button;
  /* WebKit */
  -moz-appearance: button;
  /* Mozilla */
  -o-appearance: button;
  /* Opera */
  -ms-appearance: button;
  /* Internet Explorer */
  appearance: button;
  /* CSS3 */
}

.donate-now label:hover {
  background: #DDD;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="donate-now">
  <li>
    <label for="a25">
            <input type="radio" id="a25" name="amount">$25</label>
  </li>
  <li>
    <label for="a50">
            <input type="radio" id="a50" name="amount">$50</label>
  </li>
  <li>
    <label for="a75">
            <input type="radio" id="a75" name="amount" checked="checked">$75</label>
  </li>
  <li>
    <label for="a100">
            <input type="radio" id="a100" name="amount">$100</label>
  </li>
  <li>
    <label for="other">
            <input type="radio" id="other" name="amount">other:
            <input type="text" id="otherAmount" name="numAmount">
        </label>
  </li>
</ul>

-webkit-appearance: button; /* WebKit */
-moz-appearance: button; /* Mozilla */
-o-appearance: button; /* Opera */
-ms-appearance: button; /* Internet Explorer */
appearance: button; /* CSS3 */
于 2013-04-26T18:44:30.293 回答
2

或者，如果您想自己做...

我要做的是创建带有<button>元素和隐藏表单字段元素的按钮，以记住哪个被“按下”，如下所示：

<button type="button" id="btn1">Choice 1</button>
<button type="button" id="btn2">Choice 2</button>
<button type="button" id="btn3">Choice 3</button>
<input type="hidden" id="btnValue" value="" />

您将通过 CSS 显示按钮是“按下”还是未“按下”，因此默认情况下您需要它们如下所示：

button
{
    border-width: 2px;
    border-style: outset;
    border-color: /*Insert a darker version of your button color here*/
}

然后在 jQuery 中（如果你可以在 jQuery 中完成，你可以直接在 JavaScript 中完成，所以如果你不想使用 jQuery，请记住这一点）：

$("#btn1").click(function () {
    $(this).css("border-style", "inset")
    $("#btn2").css("border-style", "outset;");
    $("#btn3").css("border-style", "outset;");
    $("btnValue").val("btn1IsPressed");
});
$("#btn2").click(function () {
    $(this).css("border-style", "inset")
    $("#btn1").css("border-style", "outset;");
    $("#btn3").css("border-style", "outset;");
    $("btnValue").val("btn2IsPressed");
});
$("#btn3").click(function () {
    $(this).css("border-style", "inset")
    $("#btn1").css("border-style", "outset;");
    $("#btn2").css("border-style", "outset;");
    $("btnValue").val("btn3IsPressed");
});

现在您需要做的就是#btnValue在 POST（或 GET 或其他）之后请求值，就像您通常会告诉他们按下了哪个“按钮”一样。

请注意，您需要添加更多功能来“取消按下”按钮，但我认为您明白了。您需要做的就是读取#btnValueon click 的值，并与其他语句一起使用 if 分支来处理它是否已被按下并相应地切换边框（不要忘记清除 ( "") 值按钮的#btnValue“未按下”，这样您就可以判断它们是否全部未按下）。

于 2013-04-26T18:44:47.910 回答
1

不幸的是，您不能直接在任何浏览器中设置单选按钮的样式。这样做的方法是使用<label>具有正确设置属性的元素，然后使用而不是for隐藏单选按钮本身。然后，您可以将标签放置在您想要的任何位置，它们将充当单选按钮。您将需要一些 javascript 来根据元素的状态控制标签的样式，因为 IE8 不支持高级 CSS 伪类，例如.visibility: hiddendisplay: none<input>:checked

这有点小技巧，但它是使用带有自定义图形的本机单选按钮并仍然保持可访问性的唯一方法。

于 2013-04-26T18:33:53.620 回答
1

用 jQuery 试试这个简单的逻辑。

$.each($('.radio-btn'), function(key, value) {
  $(this).click(function(e) {
    $('.radio-btn-selected')
      .removeClass('radio-btn-selected')
      .addClass('radio-btn');

    $(this)
      .removeClass('radio-btn')
      .addClass('radio-btn-selected');

    //do whatever you want on click
  });
});
.radio-btn-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 20px;
}

.radio-btn-wrapper {
  margin: 0px 4px;
}

.radio-btn {
  background-color: #FFFFFF;
  border: 1px solid #4A4A4A;
  color: #4A5362;
  font-size: 14px;
  line-height: 26px;
  outline: none;
}

.radio-btn-selected {
  background-color: #FFFFFF;
  border: 1px solid #55BC7E;
  color: #55BC7E;
  font-size: 14px;
  line-height: 26px;
  outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radio-btn-row">
  <div class="radio-btn-wrapper">
    <button id="bt1" class="radio-btn" type="button">Button 1</button>
  </div>
  <div class="radio-btn-wrapper">
    <button id="btn2" class="radio-btn" type="button">Button 2</button>
  </div>
  <div class="radio-btn-wrapper">
    <button id="btn3" class="radio-btn" type="button">Button 3</button>
  </div>
  <div class="radio-btn-wrapper">
    <button id="btn4" class="radio-btn" type="button">Button 4</button>
  </div>
  <!--No matter how many buttons do you want -->
</div>

于 2019-01-17T10:32:31.883 回答
0 

/* Adapted from https://stackoverflow.com/a/16243163 */

.donate-now label,
.donate-now input {
  text-align: center;
  align-items: center;
  justify-content: center;
  position: absolute;
  display: flex;
  width: 100px;
  height: 50px;
  border: 1px solid #CCC;
  padding: 0;
  cursor: pointer;
}

.donate-now input[type="radio"] {
  display: none;
}

.donate-now label:hover {
  background: #DDD;
}

.donate-now input[type="radio"]:checked + label {
  background: yellow;
}

#a25 {
  top: 20px;
  left: 20px;
}

#a50 {
  top: 20px;
  left: 140px;
}

#a75 {
  top: 20px;
  left: 260px;
}

#a100 {
  top: 20px;
  left: 380px;
}

#other {
  top: 20px;
  left: 500px;
}

#otherAmount {
  top: 20px;
  left: 620px;
}
<!-- Adapted from https://stackoverflow.com/a/16243163 -->

<div class="donate-now">
  <input type="radio" id="a25" name="amount" checked="checked" />
    <label for="a25" id="a25">$25</label>
  <input type="radio" id="a50" name="amount" />
    <label for="a50" id="a50">$50</label>
  <input type="radio" id="a75" name="amount" />
    <label for="a75" id="a75">$75</label>
  <input type="radio" id="a100" name="amount" />
    <label for="a100" id="a100">$100</label>
  <input type="radio" id="other" name="amount" />
    <label for="other" id="other">other:</label>
  <input type="text" id="otherAmount" name="numAmount" />
</div>

https://stackoverflow.com/a/16243163的改编版本无需将所有按钮彼此相邻即可工作。更改您认为合适的 CSS 以调整位置。jsFiddle

于 2022-02-25T01:22:13.540 回答