input checkbox 复选框大小修改 及 checkbox和后面文字无法对齐的解决方法

1、input checkbox 复选框大小修改

其实就是zoom属性,这个是放大的意思,可以设置为180%,这样就会比之前大很多。

<input type="checkbox" name="checkbox" value="checkbox" style="zoom:80%;">

2、checkbox和后面文字无法对齐的解决方法

同时为input和后面字体同时加上style="vertical-align:middle;"

<input type="checkbox" " style="vertical-align:middle;" />
<span style="vertical-align:middle;" ></span>

转自

https://blog.csdn.net/baidu_18607183/article/details/53128683

https://blog.csdn.net/Billyond/article/details/45098333

 

 

转载于:https://my.oschina.net/u/3774949/blog/3055984

可以通过以下方式实现复选框和按钮文字对齐,并让复选框位置在前: HTML代码: ``` <label class="checkbox-label"> <input type="checkbox"> <span class="checkmark"></span> <span class="label-text">选项1</span> </label> <button>按钮</button> ``` CSS代码: ``` .checkbox-label { display: flex; align-items: center; } .checkmark { position: relative; display: inline-block; width: 16px; height: 16px; margin-right: 8px; background-color: #fff; border: 1px solid #ccc; border-radius: 2px; } .checkmark::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 2px; background-color: #ccc; opacity: 0; transition: opacity 0.2s ease-in-out; } input[type="checkbox"]:checked + .checkmark::after { opacity: 1; } .label-text { font-size: 14px; color: #333; } button { margin-left: 8px; padding: 8px 16px; font-size: 14px; color: #fff; background-color: #007bff; border: none; border-radius: 4px; } ``` 解释: 1. 将label标签设置为flex布局,并使用align-items属性将复选框和按钮文字垂直居中对齐。 2. 通过设置.checkmark伪元素的position属性为relative,并使用::after伪元素来创建实心的复选框。 3. 使用伪类:checked来控制复选框选中状态时复选框的样式。 4. 使用.label-text类来设置按钮文字的样式。 5. 使用button标签来创建按钮。 这样就可以实现复选框和按钮文字对齐,并让复选框位置在前了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值