1

現在、CSS プロパティのコンテンツを使用して各ボタンの画像を挿入し、選択するかどうかに応じて不透明度が変化するフォームに 2 つのラジオ ボタンがあります。元のラジオ ボタンは、画像の左側に表示されたままです。元のラジオボタンの中央に画像を移動する方法はありますか?

#button1,
#button2 {
   height: 150px;
   width: 150px;
   margin-left: 10%;
   margin-right: 10%;
}

#button1 {
   content: url(../assets/logo.gif);
   opacity: .4;
   -webkit-transition-duration: 1.5s;
}
4

1 に答える 1

1

このFIDDLEはあなたが探しているものなのだろうか。

HTML

<label class="mickey" for="button1">
      <input id="button1" type="radio" name="testme" />
      <img src='http://i.imgur.com/Q7IJUNJ.png?1' alt='' />
</label>

<label class="mickey" for="button2">
      <input id="button2" type="radio" name="testme" />
      <img src='http://i.imgur.com/73kXZTR.jpg' alt='' />
</label>

CSS

#button1, #button2 {
    display: none;
}
input[type=radio] + img{
  cursor:pointer;
  border: 2px solid blue;
  opacity: 0.5;
}
input[type=radio]:checked + img {
  border: 2px solid red;
  opacity: 1.0;
}
img {
    height: 100px;
    width: 100px;
}
于 2014-05-24T20:39:53.057 に答える