用于替换单选按钮的可点击文本

时间:2020-05-08 作者:Azury

嘿,伙计们,我想寻求一些头脑风暴的帮助。

我在一个网站上有这种联系方式,它有可选择的文本来代替复选框或单选按钮

我使用了强大的表单,我用单选按钮正确地获得了样式,但它没有相同的光斑,只有文本

我会附上一些图片只是为了显示上下文,因为我不知道你会怎么称呼它,也不知道该怎么查找才能对此进行更广泛的研究。

这是我目前在网站上的设计

enter image description here

这就是设计

enter image description here

我相信你会同意,没有单选按钮的可选功能看起来更好,正如我提到的,我不知道这个“术语”是什么,也不知道该怎么做

<div class="frm_radio" id="frm_radio_18-0">
 <label for="field_yhi3q-0">        
  <input type="radio" name="item_meta[18]" id="field_yhi3q-0" value="WEB 
 DESIGN &amp; DEVELOPMENT" data-invmsg="I would like to talk to you about 
 is invalid">
 WEB DESIGN &amp; DEVELOPMENT
 </label>
</div>

1 个回复
SO网友:HU ist Sebastian

这是一个css问题,所以这真的不是合适的地方。

但是,您需要使用+运算符和:checked选择器,如下所示:

(假设您的单选按钮是这样构建的):

<input type="radio" id="my_awesome_radio_1" value="value1" />
<label for="my_awesome_radio_1">Value 1</label>
<input type="radio" id="my_awesome_radio_2" value="value2" />
<label for="my_awesome_radio_2">Value 2</label>
<input type="radio" id="my_awesome_radio_3" value="value3" />
<label for="my_awesome_radio_3">Value 3</label>
CSS代码:

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

input[type=radio] + label {
   display: inline-block;
   border: 1px solid #eee;
   padding: 10px;
   margin-right: 10px;
   color: #eee;
}

input[type=radio]:checked + label {
   background: #eee;
   color: #000;
}

相关推荐

Forms cut off when on mobile

信用卡处理器生成的表单通过javascript加载。正常加载时,可以看到模板工作良好here, 但是移动用户看到下面的内容,无法滚动。据说表单有一个移动版本,但显然无法加载?使用以下方法将表单加载到页面上:<div id=\"bbox-root\"></div> <script type=\"text/javascript\"> window.bboxInit = function () { bbox.show