bootstrap中checkbox和input 在同一行时，input得到焦点不灵敏

r囧r小猫 2022-05-28 03:21 185阅读 0赞

如代码使用Bootstrap，实现checkbox和input在同一行的中的效果，但鼠标在input的上方时，还是指针的状态，input无法得到焦点。

<div class="panel-body">
                <div id="common-div" style="display: inline;">
                    <form id="common-form" class="form-horizontal" action="">
                        <div class="form-group">
                            <label for="description" class="col-sm-2 control-label"></label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="options2" name="options2" placeholder="不得超过10个汉字" autocomplete="off" />
                            </div>
                           <div class="checkbox" >
                                 <label><input id="checked2" type="checkbox" value="2" />正确答案 </label>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

无法得到焦点的截图（屏幕截图，无法截取到鼠标状态，以黑色箭头表示）

![70][]

正常情况鼠标应变为"I"类似这种情况。如下图。

![70 1][]

鼠标无法得到焦点的原因：class="checkbox"的标签遮挡了input标签。

修改后的代码 ：（使checkbox标签在input标签的下面）

![70 2][]

[70]: /images/20220528/a1853bbb5df24c4ab080e8b72ff3b724.png
[70 1]: /images/20220528/465970e17aff4b858f50c6b42cbfc8af.png
[70 2]: /images/20220528/032c56dfa9ec4336b90f86b56dc68b04.png

发表评论取消回复

表情：

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

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

相关阅读

相关 vue 表单 input checkbox

<body> <div id="app"> <div> <span>爱好：</span>

分手后的思念是犯贱/ 2023年01月07日 08:49/ 0 赞/ 139 阅读

相关设置input标签按tab键时不获取焦点的方法

要求输入物料编号，按tab键后，自动获取并填充配件编号、配件名称和品牌列，并且将光标物料编号input直接移到数量的input里，如下图(表格的单元格里都是input,只是bo

怼烎@/ 2022年08月02日 11:43/ 0 赞/ 589 阅读

相关 Bootstrap File Input introduce

official website： [http://plugins.krajee.com/file-input][http_plugins.krajee.com_file-

蔚落/ 2022年06月13日 05:36/ 0 赞/ 191 阅读

相关 input type="checkbox"

正確的使用方式 $("checkbox-0").prop("checked", "checked"); //選中 $("checkbox-0").prop

布满荆棘的人生/ 2022年06月06日 01:20/ 0 赞/ 206 阅读

相关 bootstrap中checkbox和input 在同一行时，input得到焦点不灵敏

如代码使用Bootstrap，实现checkbox和input在同一行的中的效果，但鼠标在input的上方时，还是指针的状态，input无法得到焦点。 <div cl

r囧r小猫/ 2022年05月28日 03:21/ 0 赞/ 186 阅读

相关 html中文和字母不在同一行

需求要实现发布的公告自动换行，我将内容放入div，中文可以自动换行，长英文字符串不可以换行，这是由于英文字符不加空格默认是一个单词，导致不换行，尝试加<pre>标签也不行。

红太狼/ 2022年05月12日 12:46/ 0 赞/ 221 阅读

相关 input type=checkbox样式设置

效果 ![20190219143029963.jpg][] html代码 <div class="checkbox-item"> <input n

蔚落/ 2022年03月18日 04:56/ 0 赞/ 308 阅读

相关 vue input自动获取焦点

方法一这个方法适合vue插件，id比较好绑定 // html 部分 <input type="text" id="name">

逃离我推掉我的手/ 2022年03月16日 14:54/ 0 赞/ 393 阅读

相关 input checkbox 全选和反选

全选和反选(仅供参考) 注:请忽略我的排版O(∩\_∩)O哈哈~ <!DOCTYPE html> <html> <head> <me

Myth丶恋晨/ 2022年02月01日 08:25/ 0 赞/ 258 阅读

相关修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式

表单中，经常会使用到单选按钮和复选框，但是，input\[type="radio"\] 和 input\[type="checkbox"\] 的默认样式在不同的浏览器或者手机上

怼烎@/ 2021年12月21日 14:29/ 0 赞/ 380 阅读