Remove the highlight in bootsrap datepicker

Question

I am using bootstrap datepicker version 1.6.4. I wanted to remove the Blue higlight as shown in the image below.

Blue highlight to be removed

I have done the following CSS codes: outline: 0; outline: none; but it does not work on Google chrome. I've tried to test it in different browser and I dont see the blue highlight. Is there a Chrome-specific CSS that I could use to solve my problem?

what are tried code ? please insert your questions or js Fiddle — Sumit patel, Nov 07 '16 at 10:23
This has already been answered on [another question](http://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome) — Phil Cook, Nov 07 '16 at 10:55

score 0 · Answer 1 · answered Nov 07 '16 at 10:22

You need to set this to the input element of datepicker. I can't see what class it has or how to access it because you didn't provide any code.

So simply apply this css to this input and it should resolve your problem:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
}

Example:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
}

<input type="text" class="noselect" value="10/12/2016"/>

score 0 · Answer 2 · answered Nov 07 '16 at 11:32

This is what you can do. See the inline demo. I would suggest, instead of removing the completion selection highlight, just change the background or font color.

.noselect::selection {
  color: none;
  background: none;
}

<h6>Sample</h6>

<input class="noselect" type="text" value="11/05/1988" />

Remove the highlight in bootsrap datepicker

2 Answers2