Question

我有代替单选按钮输入的图像。我试图直接在这些图像上面写文字，但我找不到一种简单的方法来实现这一点。

我还需要在作为链接的图像之上进行书写，因此理想情况下，在两种情况下均可使用的方式最佳。

#selector {
  width: 5vw;
  vertical-align: middle;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + image {
border: 2px solid green;
}

<label>
  <input type="radio" name="amount" value="100" checked />
  <img id="selector" src="http://s8.postimg.org/k4wy7buc1/selector.png">100</label>
<label>
  <input type="radio" name="amount" value="250" />
  <img id="selector" src="http://s8.postimg.org/k4wy7buc1/selector.png">250</label>
<label>
  <input type="radio" name="amount" value="500" />
  <img id="selector" src="http://s8.postimg.org/k4wy7buc1/selector.png">500</label>
<label>
  <input type="radio" name="amount" value="1000" />
  <img id="selector" src="http://s8.postimg.org/k4wy7buc1/selector.png">1000</label>
<label>
  <input type="radio" name="amount" value="1500" />
  <img id="selector" src="http://s8.postimg.org/k4wy7buc1/selector.png">1500</label>

Answer 1

您是否考虑过使用background-image？

input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  outline: 2px solid green;
}
label {
  background-image: url('http://s8.postimg.org/k4wy7buc1/selector.png');
  display: inline-block;
  background-size: 40px 20px;
  width: 40px;
  height: 20px;
}

<input id="rb1" type="radio" name="amount" value="100" checked />
<label for="rb1">100</label>
<input id="rb2" type="radio" name="amount" value="250" />
<label for="rb2">250</label>
<input id="rb3" type="radio" name="amount" value="500" />
<label for="rb3">500</label>
<input id="rb4" type="radio" name="amount" value="1000" />
<label for="rb4">1000</label>
<input id="rb5" type="radio" name="amount" value="1500" />
<label for="rb5">1500</label>

Answer 2

您可以执行此操作，将标签设置为display:inline-block;，将<span>（文本的位置）设置为display:block;，并设置bottom否定位置：

<强> CSS

    #selector {
      width: 5vw;
      vertical-align: middle;
    }

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

    input[type="radio"]:checked + image {
      border: 2px solid green;
    }

    label {
      display: inline-block;
    }

    label span {
      display: block;
      position: relative;
      bottom: -20px;
    }

<强> HTML

<label>
  <span>teste</span>
  <input type="radio" name="amount" value="100" checked />
  <img id="selector" src="http://s8.postimg.org/k4wy7buc1/selector.png">100</label>
<label>
  <span>teste</span>
  <input type="radio" name="amount" value="250" />
  <img id="selector" src="http://s8.postimg.org/k4wy7buc1/selector.png">250</label>
<label>
  <input type="radio" name="amount" value="500" />
  <img id="selector" src="http://s8.postimg.org/k4wy7buc1/selector.png">500</label>
<label>
  <input type="radio" name="amount" value="1000" />
  <img id="selector" src="http://s8.postimg.org/k4wy7buc1/selector.png">1000</label>
<label>
  <input type="radio" name="amount" value="1500" />
  <img id="selector" src="http://s8.postimg.org/k4wy7buc1/selector.png">1500</label>

<强> DEMO HERE

将文字放在图像上

2 个答案: