html - 双击复选框会在复选框右侧创建蓝色光标

Question

当我双击复选框时，它会创建蓝色光标或垂直线或复选框的右侧，我尝试在每个输入上添加 css 属性，例如填充或边距，但没有奏效。另请参见图片。

HTML

<div class="fbox3 nspan " id="sendWelcomeEmail">
<input id="sendWelcomeEmail1" name="sendWelcomeEmail" class="label-revert " checked="true" type="checkbox" value="true">
<label for="sendWelcomeEmail1" style="display:inline-block !important;padding-top:0 !important;padding-bottom:0 !important;padding-right: 0 !important; margin-right: 0px !important; "></label>
<span style="display:inline-block; font-family: latolight, helvetica, arial, sans-serif ; font-weight: 300; color: #969696 !important; font-size: 16px;">Send</span>
<input type="hidden" id="sendWelcomeEmailHidden" name="_sendWelcomeEmail" value="on">
</div>

CSS

#user-profile-form label > span {
margin-right: 0 !important;}

Answer 1

双击尝试选择元素。这条蓝线是选定的区域。为避免这种情况，您应该使用一些 css 规则:

#sendWelcomeEmail
{
    -webkit-user-select: none !important;  /* Chrome all / Safari all */
    -moz-user-select: none !important;     /* Firefox all */
    -ms-user-select: none !important;      /* IE 10+ */
    user-select: none !important;          /* Likely future */  
}