Html CSS中的大单选按钮设计
当您将鼠标悬停时，选择区域上应该有红色边框，当您单击单选按钮时，它应该用一个与图像类似的圆圈对其进行检查 到目前为止，在我的HTML和CSS中，我把样式放在了我试图以表单检查为目标的地方，但这一个不起作用，我的设计也不符合我的要求。如何实现与上图相同的效果 .表格检查{ 边框：1px实心底纹； 背景：fff； 边界半径：填充：14px 15px 14px 45px； 边界半径：5px； } 输入[type=radio]。表单检查输入{ 边界半径：50%； 背景：红色； } 你喜欢网络开发和手机开发吗？ 对 不 单选按钮是CSS无法使用的 这个问题的一个常见解决方案是隐藏本机单选按钮，并使用其他可设置样式的元素重新构建它，将其放置在原始按钮的位置 在下面的代码段中，原始收音机通过visibility:hidden隐藏，并使用：：after伪元素在其上创建一个红色圆圈 输入[类型=收音机]{ 可见性：隐藏；/*隐藏本机单选按钮*/ } 标签>跨度{ 边距：0 1rem；/*为大按钮留出空间*/ } 输入[type=radio]：{/*之后使用伪元素构建替换*/ 内容：； 位置：绝对位置； /*围成一个圈*/ 宽度：2em； 高度：2em； 边界半径：50%； /*白色背景，灰色边框*/ 背景：白色； 盒影：0 0 2px 1px灰色； /*有趣的事实：可以覆盖子可见性*/ 能见度：可见； /*对齐*/ 显示器：flex； 证明内容：中心； 对齐项目：居中； /*文本处理*/ 字体系列：无衬线； 字体大小：粗体； /*设置长方体阴影更改的动画只是为了好玩*/ 过渡：框阴影0.25s； } 输入[type=radio]：悬停：：之后{ 盒子阴影：0 0 4×4×4×红色； } 输入[类型=收音机]：选中：：之后{ 内容:'✔'; /* 如果选中，则显示复选标记*/ 盒影：无； /*红色背景，白色前景*/ 背景：红色； 颜色：白色； } 单选按钮 单选按钮 单选按钮 单选按钮单选按钮是CSS无法使用的 这个问题的一个常见解决方案是隐藏本机单选按钮，并使用其他可设置样式的元素重新构建它，将其放置在原始按钮的位置 在下面的代码段中，原始收音机通过visibility:hidden隐藏，并使用：：after伪元素在其上创建一个红色圆圈 输入[类型=收音机]{ 可见性：隐藏；/*隐藏本机单选按钮*/ } 标签>跨度{ 边距：0 1rem；/*为大按钮留出空间*/ } 输入[type=radio]：{/*之后使用伪元素构建替换*/ 内容：； 位置：绝对位置； /*围成一个圈*/ 宽度：2em； 高度：2em； 边界半径：50%； /*白色背景，灰色边框*/ 背景：白色； 盒影：0 0 2px 1px灰色； /*有趣的事实：可以覆盖子可见性*/ 能见度：可见； /*对齐*/ 显示器：flex； 证明内容：中心； 对齐项目：居中； /*文本处理*/ 字体系列：无衬线； 字体大小：粗体； /*设置长方体阴影更改的动画只是为了好玩*/ 过渡：框阴影0.25s； } 输入[type=radio]：悬停：：之后{ 盒子阴影：0 0 4×4×4×红色； } 输入[类型=收音机]：选中：：之后{ 内容:'✔'; /* 如果选中，则显示复选标记*/ 盒影：无； /*红色背景，白色前景*/ 背景：红色； 颜色：白色； } 单选按钮 单选按钮 单选按钮 像这样的单选按钮 /*仅供演示*/ 身体{ 字体系列：无衬线； 背景：f1f1； 填充：0 40px；/*仅用于演示*/ } .问题框{ 位置：相对位置； } 问题：不是最后一个孩子{ 边缘底部：10px； } .问题输入{ 位置：绝对位置； 左：-9999px； } .问题标签{ 位置：相对位置； 显示：块； 线高：40px； 边框：1px实心ccc； 边界半径：5px； 背景色：fff； 填充：5px20px 5px50px； 光标：指针； 过渡：所有0.15秒缓进缓出； } .问题标签：悬停{ 边框颜色：cc3300； } .问题标签：之前，.问题标签：之后{ 位置：绝对位置； 内容：； } .问题标签：之前{ 顶部：12px； 左：10px； 宽度：26px； 高度：26px； 边界半径：50%； 背景色：fff； 盒影：插入0 1px ccc； 过渡：所有0.15秒缓进缓出； } .问题\输入：选中+.问题\标签：之前{ 背景色：cc3300； 框阴影：0； } .问题\输入：选中+。问题\标签：之后{ 顶部：20px； 左：17px； 宽度：10px； 高度：5px； 左边框：2倍实心fff； 边框底部：2个实心fff； 变换：旋转-45度； } 你喜欢网络开发吗？ 对 不 差不多 这个 /*仅供演示*/ 身体{ 字体系列：无衬线； 背景：f1f1； 填充：0 40px；/*仅用于演示*/ } .问题框{ 位置：相对位置； } 问题：不是最后一个孩子{ 边缘底部：10px； } .问题输入{ 位置：绝对位置； 左：-9999px； } .问题标签{ 位置：相对位置； 显示：块； 线高：40px； 边框：1px实心ccc； 边界半径：5px； 背景色：fff； 填充：5px20px 5px50px； 光标：指针； 过渡：所有0.15秒缓进缓出； } .问题标签：悬停{ 边框颜色：cc3300； } .问题标签：之前，.问题标签：之后{ 位置：绝对位置； 内容：； } .问题标签：之前{ 顶部：12px； 左：10px； 宽度：26px； 高度：26px； 边界半径：50%； 背景色：fff； 盒影：插入0 1px ccc； 过渡：所有0.15秒缓进缓出； } .问题\输入：选中+.问题\标签：之前{ 背景色：cc3300； 框阴影：0； } .问题\输入：选中+。问题\标签：之后{ 顶部：20px； 左：17px； 宽度：10px； 高度：5px； 左边框：2倍实心fff； 边框底部：2个实心fff； 变换：旋转-45度； } 你喜欢网络开发吗？ 对 不Html CSS中的大单选按钮设计,html,css,Html,Css,当您将鼠标悬停时，选择区域上应该有红色边框，当您单击单选按钮时，它应该用一个与图像类似的圆圈对其进行检查 到目前为止，在我的HTML和CSS中，我把样式放在了我试图以表单检查为目标的地方，但这一个不起作用，我的设计也不符合我的要求。如何实现与上图相同的效果 .表格检查{ 边框：1px实心底纹； 背景：fff； 边界半径：填充：14px 15px 14px 45px； 边界半径：5px； } 输入[type=radio]。表单检查输入{ 边界半径：50%； 背景：红色； } 你喜欢网络开发和手机
我给你写了一段。不需要JSFiddleI添加引导。编辑这个片段，看一看我在这里给你做了一个片段。不需要JSFiddleI添加引导。编辑代码段，并制作一个