amar ghodke amar ghodke - 10 months ago 46
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


<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">


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

Answer Source

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

    -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 */