amar ghodke amar ghodke - 26 days ago 14
CSS Question

on double clicking checkbox creates blue cursor on right side of the checkbox

When i double click on checkbox it creates blue cursor or vertical line or right side of checkbox, i tried adding css properties on each of this input such as padding or margin but did not worked.See image as well.

enter image description here

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

Double click tries to select element. This blue line is the selected area. To avoid this you should use some css rules:

#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 */  
}  
Comments