1

ラジオボタンをカスタマイズしようとしていますが、少し問題があります。画像は正しく表示されますが、ラジオ ボタンを選択できないため、画像スプライトは (選択した画像に) 移動しません。

ラジオ ボタンの css を (ディスプレイをオンに戻す) に変更すると、次のようになります。

input[type="radio"]
{

}

ラジオ ボタンが (画像と同様に) 表示されます。ラジオ ボタンをクリックして選択すると、画像のサイズが変わりますが、これの要点は、デフォルトのラジオ ボタンではなく、画像だけを持つことです。

HTML

   <div class="radio-inline">
       <input type="radio" id="" name="tester"/><label for=""><span></span>Button 1</label>
   </div>
       <div class="radio-inline">
       <input type="radio" id="Radio3" name="tester"/><label for=""><span class="label-font"></span>Button 2</label>
   </div>

CSS

.radio-inline
{
   margin-bottom:15px;
}

input[type="radio"]
{
    display:none;
}

input[type="radio"] + label
{
    display:inline-block;
    vertical-align:middle;
    cursor:pointer;
    font-size:16px;
    font-weight:200;  
}


input[type="radio"] + label span
{
    display:inline-block;
    width:40px;
    height:40px;
    vertical-align:middle;
    background:url(../images/radio-btn.png) left top no-repeat;
    cursor:pointer;    
}

input[type="radio"]:checked
{
    background:url(../images/radio-btn.png) -40px top no-repeat;
{
4

4 に答える 4

0

CSS のエラー:

input[type="radio"]:checked
{
    background:url(../images/radio-btn.png) -40px top no-repeat;
{

に変更する必要があります

input[type="radio"]:checked + label span
{
    background:url(../images/radio-btn.png) -40px top no-repeat;
}

「+ label span」を追加しましたが、最後のブラケットも間違った方法でした。

于 2013-08-30T11:36:05.193 に答える
0

以下は私が推測するあなたのためにうまくいくでしょう。あらゆる状態に任意のタイプの画像を使用できます。以下のサンプルは、ラジオボタンとチェックボックスに対して行われます。

github で sass ソリューションを見つけることもできます: https://github.com/lpradhap/Awesome-Checkbox-and-radio-button

ul {
  list-style: none;
}
body {
  padding: 100px;
}

/* checkbox and radio buttion */
label {
  display: inline-block
}

label input[type="checkbox"] {
  visibility: hidden;
  margin: 0;
  width: 0;
  height: 0;
  float: left
}

label input[type="checkbox"] + span {
  background-image: url("http://pradhap.com/demo/awesome-check-radio/images/control-sprite.png");
  background-repeat: no-repeat;
  background-position: 0 -40px;
  cursor: pointer;
  -webkit-appearance: none;
  -mozkit-apperance: none;
  width: 20px;
  height: 20px;
  display: inline-block;
  float: left;
  margin: 0 10px 10px 0
}

label input[type="checkbox"] + span:hover {
  background-position: 0 -80px
}

label input[type="checkbox"]:disabled + span {
  background-position: 0px -60px
}

label input[type="checkbox"]:checked + span {
  background-position: 0 0px
}

label input[type="checkbox"]:checked + span:hover {
  background-position: 0 -20px
}

label input[type="radio"] {
  visibility: hidden;
  margin: 0;
  width: 0;
  height: 0;
  float: left
}

label input[type="radio"] + span {
  background-image: url("http://pradhap.com/demo/awesome-check-radio/images/control-sprite.png");
  background-repeat: no-repeat;
  background-position: -22px -40px;
  cursor: pointer;
  -webkit-appearance: none;
  -mozkit-apperance: none;
  width: 20px;
  height: 20px;
  display: inline-block;
  float: left;
  margin: 0 10px 10px 0
}

label input[type="radio"]:disabled + span {
  background-position: -22px -60px
}

label input[type="radio"]:checked + span {
  background-position: -22px 0px
}

label input[type="radio"]:checked + span:hover {
  background-position: -22px -20px
}

label:hover {
  cursor: pointer
}

label:hover input[type="checkbox"] + span {
  background-position: 0 -80px
}

label:hover input[type="checkbox"]:disabled + span {
  background-position: 0px -60px
}

label:hover input[type="checkbox"]:checked + span {
  background-position: 0 -20px
}

label:hover input[type="radio"] + span {
  background-position: -22px -80px
}

label:hover input[type="radio"]:disabled + span {
  background-position: -22px -60px
}

label:hover input[type="radio"]:checked + span {
  background-position: -22px -20px
}


/* dropdown  */
select {
  width: 268px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: solid 1px #cccccc;
  border-radius: 0;
  height: 34px;
  cursor: pointer;
  background: #fff;
}
select option {
  padding: 10px;
}
<ul>
    <li>
        <label for="text-checkbox">
            <input type="checkbox" name="test-checkbox" id="text-checkbox" />
            <span></span>
            Sample Check box
        </label>
    </li>
    <li>
        <label for="test-radio">
            <input type="radio" name="test-radio" id="test-radio" />
            <span></span>
            Sample radio button
        </label>
        <label for="test-radio1">
            <input type="radio" name="test-radio" id="test-radio1" />
            <span></span>
            Sample radio button
        </label>
    </li>
</ul>

于 2017-09-16T02:46:58.983 に答える