将单选按钮元素定位在背景图像上

本文介绍了将单选按钮元素定位在背景图像上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个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="i.stack.imgur/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>