如何将文本放在单选按钮内?

时间：2023-10-20

本文介绍了如何将文本放在单选按钮内?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

我正在尝试将一个字母放在单选按钮(使用 Materialize 框架)中，例如此

I am trying to put a letter inside a radio button (with Materialize framework) like the A and B in this image.

How do I do this?

解决方案

You cannot do that. But instead, you can make something similar using CSS:

label {display: block; padding: 5px; position: relative; padding-left: 20px;}
label input {display: none;}
label span {border: 1px solid #ccc; width: 15px; height: 15px; position: absolute; overflow: hidden; line-height: 1; text-align: center; border-radius: 100%; font-size: 10pt; left: 0; top: 50%; margin-top: -7.5px;}
input:checked + span {background: #ccf; border-color: #ccf;}

<h3>Select One</h3>
<label><input type="radio" name="select" /><span>a</span> Item 1</label>
<label><input type="radio" name="select" /><span>b</span> Item 2</label>

Preview

这篇关于如何将文本放在单选按钮内?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

上一篇：我们可以从邮递员中的 excel 中读取数据进行 js 测试吗? 下一篇：HTML + React:单选按钮卡在最初设置为“已选中"的按钮上.

layer.open打开的页面关闭时，父页面刷新的方法layer.open打开的页面关闭时，父页面刷新的方法，在layer.open中添加： end: function(){ window.parent.location.reload();//关闭open打开的页面时，刷新父页面 }

如何将文本放在单选按钮内?

问题描述

相关文章