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

2023-10-20前端开发问题
6

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

问题描述

我正在尝试将一个字母放在单选按钮(使用 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

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

The End

相关推荐

layui 单选框、复选框、下拉菜单不显示问题如何解决?
1. 如果是ajax嵌套了 页面, 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09 前端开发问题
313

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271

缩放背景图像以适合 ie8 窗口
Scale background image to fit ie8 window(缩放背景图像以适合 ie8 窗口)...
2024-04-19 前端开发问题
11

IE7 (IETEster) 中的@fontface 无法正常工作
@fontface in IE7 (IETEster) not working properly(IE7 (IETEster) 中的@fontface 无法正常工作)...
2024-04-19 前端开发问题
9

Safari 5.1 打破 CSS 表格单元格间距
Safari 5.1 breaks CSS table cell spacing(Safari 5.1 打破 CSS 表格单元格间距)...
2024-04-19 前端开发问题
3

如何使用 `on()` 委托 `hover()` 函数
How to delegate `hover()` function by using `on()`(如何使用 `on()` 委托 `hover()` 函数)...
2024-04-19 前端开发问题
17