How to get the highlight color in the textbox of html

Question

I want to make it harmonize with a default input color in my original component with HTML and JavaScript(or jQuery). Therefore, I'm looking into the method of getting a standard text selection color.

In CSS, though it is not official, it can change the color of a highlight of the text on modern browsers.

input::selection {
    background-color:red;
    color:blue;
}

I think it's effective to trace like this.

var hilightColor = $('input::selection').css('background-color');

Is this realizable?

Hope this helps: http://stackoverflow.com/questions/17205893/how-to-change-the-color-of-selected-text-in-css-for-jquery-mobile-div — Ron, Jul 02 '13 at 12:13
I think he's asking how to get the browser's default value. And I don't think this is possible with javascript. — Dan Grahn, Jul 02 '13 at 12:17

score 0 · Answer 1 · answered Jul 02 '13 at 12:16

I think that the code you have up there is fine, but going for cross-browser compatibility, you should also include the moz library in your CSS code, as the default selection (I'm pretty sure) is unsupported by Firefox, while it is supported in Chrome and Safari.

input::selection {
    background-color: red;
    color: blue;
}

input::-moz-selection {
    background-color: red;
    color: blue;
}

score 0 · Answer 2 · answered Jul 03 '13 at 02:51

Not sure what do you want.

1) If you want to harmonize with the text and input in your page, you can set the background and text color the same for both text and input.

See DEMO http://jsfiddle.net/yeyene/WLf9x/

html, body, input[type=text]{
    font-size:14px;
    line-height:16px;
    background:#fff;
    color:#555;    
}
input[type=text]{
    border:none;
    height:16px;
    width:85px;    
}

2) If you also want selection color the same for both input and text. You can set ::selection's background and text style the same as body's style.

How to get the highlight color in the textbox of html

2 Answers2