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 分間のハッキー バージョンです。さらにクリーンアップすることもできますが、それがいかに単純であるかを示す良い例です。

.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");
});

あとは、POST (または GET など) の後に値を要求する#btnValueだけです。通常、どの「ボタン」が押されたかを伝えるのと同じです。

ボタンを「押す」ためにもう少し機能を追加する必要があることをお勧めしますが、要点は理解できたと思います。あなたがする必要があるのは#btnValue、クリック時に の値を読み取り、他のステートメントとともに if ブランチを使用して、それがすでに押されているかどうかを処理し、それに応じて境界線を切り替えることです (""値をクリアすることを忘れないでください ( )ボタンの#btnValue「押し下げ」についての説明なので、ボタンがすべて押されていないかどうかがわかります）。

于 2013-04-26T18:44:47.910 に答える
1

残念ながら、どのブラウザでもラジオ ボタンを直接スタイル設定することはできません。それを行う方法は<label>、適切に設定された属性を持つ要素を使用しfor、ラジオ ボタン自体をvisibility: hiddenではなくを使用して非表示にすることですdisplay: none。次に、ラベルを好きな場所に配置すると、ラベルがラジオ ボタンとして機能します。<input>要素の状態に基づいてラベルのスタイルを制御するには、JavaScript が少し必要になります:checked。

これはちょっとしたハックですが、カスタム グラフィックスでネイティブ ラジオ ボタンを使用し、アクセシビリティを維持する唯一の方法です。

于 2013-04-26T18:33:53.620 に答える