将单选按钮元素定位在背景图像上 [英] position radio buttons elements over background image

问题描述

我有一个backgorund图像，想放置一些单选按钮(单选按钮的圆圈将被隐藏，并且只会显示标签)，正好靠近红色三角形(如

I have a backgorund image and want to position some radio buttons (the circle of the radio button will be hidden and only the label will appear) just close to the red triangles (as shown here) . How can I do this? Please see my code here

input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  border: 2px solid red;
}

<img src="http://i.stack.imgur.com/CUTm6.png" alt="Synoptic table" align="center">
<div class="buton">
  <input type="radio" name="a" value="a" id="a" />
  <label for="a">text radio 1</label>
</div>
<div class="buton">
  <input type="radio" name="a" value="b" id="b" />
  <label for="b">text radio 2</label>
</div>
<div class="buton">
  <input type="radio" name="a" value="c" id="c" />
  <label for="c">text radio 3</label>
</div>

推荐答案

好，解决了这个问题. 我将位置作为包含单选按钮的div中的样式放置

Ok, managed to solve that. I put the position as a style in the div that includes the radio button

<div class="buton" style="position:absolute; left:400px; top:250px">
  <input type="radio" name="a" value="b" id="b" /> <label for="b"> radio text 2 </label>
</div>

这篇关于将单选按钮元素定位在背景图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！