css自定义radio选择样式

忘是亡心i 2023-06-22 10:25 14阅读 0赞

/*两个复选框box浮动，方便设置css*/
    			.radio{
    				display:-moz-box;
    				display:-webkit-box;
    				display:box;
    				float:left;
    			}
    			/*让原有的复选框图案隐藏*/
    			.radios input[type=radio]{
    				display: none;
    			}
    			/*图片和文字都放在label里面*/
    			.radios span{
    				display:-moz-box;
    				display:-webkit-box;
    				display:box;
    				float:left;
    				line-height: 20px;/*不设行高文字垂直方向不居中*/
    				text-indent: 30px;/*使文字缩进：文字和图片都在label里面，不缩进文字和图片叠加在一起*/
    				background:url(${ctxPath}/static/image/radios_false.png) no-repeat left top;/*背景图片*/
    				background-size: 20px 20px;/*设置背景图片大小*/
    			}
    			.radios input[type=radio]:checked + span{
    				background:url(${ctxPath}/static/image/radios_true.gif) no-repeat left top;/*被选中时，换背景图片*/
    				background-size: 20px 20px;
    			}

<div class="radios" v-for="(item,index) in List">
    						<label>
    							<input type="radio" name="optionsRadios" id="optionsRadios1" :value="item.pro_id"  :checked="item.pro_id==Id"/>
    							<span :id="item.pro_id">{
       {item.pro_name}}</span>
    						</label>
    					</div>

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 自定义滚动条样式

总是记不住这几个修改滚动条的伪类，抄过来记录一下：你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式: ::-webkit-scrollbar

客官°小女子只卖身不卖艺/ 2023年07月20日 13:59/ 0 赞/ 42 阅读

相关 css自定义radio选择样式

/两个复选框box浮动，方便设置css/ .radio{ display:-moz-box; display:-webki

忘是亡心i/ 2023年06月22日 10:25/ 0 赞/ 15 阅读

相关 css 自定义样式继承写法

最近弄css，中间有些样式需要单独定义，但是又继承于其他的样式，弄过一次，没有记录，重新弄耽误了点时间，这里算是记录下吧方便以后的修改。当需要自定义样式的时候，但是又是

本是古典何须时尚/ 2022年06月05日 10:12/ 0 赞/ 266 阅读

相关自定义input type=”radio”样式

html： <input type="radio" name="sex" value="man" id="man" checked> <lab

待我称王封你为后i/ 2022年06月02日 00:38/ 0 赞/ 189 阅读

相关 css自定义滚动条样式

代码 css自定义滚动条样式，webkit内核浏览器。 / 滚动条样式 / ::-webkit-scrollbar { / 滚动条的宽度 / width

偏执的太偏执、/ 2022年05月25日 11:05/ 0 赞/ 315 阅读

相关 input radio 自定义css样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

向右看齐/ 2022年05月15日 00:22/ 0 赞/ 292 阅读

相关 CSS自定义checkbox样式

\[type=checkbox\]是过滤的意思，意思是说如果遇到type=checkbox的，就执行以下的样式。 input[type=checkbox],

小咪咪/ 2022年05月14日 04:55/ 0 赞/ 298 阅读

相关自定义radio

做了一个简单的自定义radio的样式基于mui和jq ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cH

╰半夏微凉°/ 2022年03月30日 09:30/ 0 赞/ 215 阅读

相关自定义样式的radio单选按钮

//自定义单选radio HTML 代码： <label class="defined-label"> <input class="def

曾经终败给现在/ 2021年11月17日 02:00/ 0 赞/ 409 阅读

相关 CSS - 使用css自定义滚动条样式

使用css自定义滚动条样式一. 隐藏滚动条二. 修改滚动条样式 Chrome（WebKit的浏览器） IE浏览器一. 隐藏

以你之姓@/ 2021年07月26日 01:49/ 0 赞/ 608 阅读