How do I set colour to same as the selection colour so works on all browsers/operating systems

Question

So I am creating a custom component based on <ul><li> but looking more like a <select><option> and when clicking on it I want its foreground/background to be set to whatever is the default selection colour on the users system, by adding something to css for that particular component

Currently it is just hardcoded to a version of blue which would only be right for a specific browser on particular OS

 .delete_criteria li.selected {
      background-color: #3399FF;
      color: white;
    }

If I don't add the above CSS then there is no visible change when you select it. What I want to do is set to to default as this pseudo code will demonstrate

.delete_criteria li.selected {
          background-color: default-selection-background-colour;
          color: default-selection-foreground-colour;
        }

but I don't know what to replace default-selection-background-colour and default-selection-foreground-colour with

Fuller example showing the html and javscript:

   <div class="delete_criteria">
<ul>
    <li>
        <div>
            <label>
                Audio Format
            </label>
            <input name="AUDIOFORMAT" id="AUDIOFORMAT" value="AUDIOFORMAT" hidden="hidden" type="text">
        </div>
    </li>
    <li>
        <div>
            <label>
                Bitrate
            </label>
            <input name="BITRATE" id="BITRATE" value="BITRATE" hidden="hidden" type="text">
        </div>
    </li>
    <li>
        <div>
            <label>
                Track Length
            </label>
            <input name="TRACKLENGTH" id="TRACKLENGTH" value="TRACKLENGTH" hidden="hidden" type="text">
        </div>
    </li>
    <li>
        <div>
            <label>
                Filename
            </label>
            <input name="FILENAME" id="FILENAME" value="FILENAME" hidden="hidden" type="text">
        </div>
    </li>
    <li>
        <div>
            <label>
                File Creation Date
            </label>
            <input name="FILE_CREATION_DATE" id="FILE_CREATION_DATE" value="FILE_CREATION_DATE" hidden="hidden" type="text">
        </div>
    </li>
    <li>
        <div>
            <label>
                File Modified Date
            </label>
            <input name="FILE_MODIFIED_DATE" id="FILE_MODIFIED_DATE" value="FILE_MODIFIED_DATE" hidden="hidden" type="text">
        </div>
    </li>
</ul>
<button id="up" type="button">
    Up
</button>
<button id="down" type="button">
    Down
</button>
// enable moving an element up
document.getElementById('up').addEventListener('click', () => {
  var li = document.querySelector('li.selected');
  if (li.previousElementSibling !== null) {
    li.parentNode.insertBefore(li, li.previousElementSibling);
  }
});

// enable moving an element down
document.getElementById('down').addEventListener('click', () => {
  var li = document.querySelector('li.selected');
  if (li.nextElementSibling !== null) {
    li.parentNode.insertBefore(li, li.nextElementSibling.nextElementSibling);
  }
});
                                    </script>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <div>
.delete_criteria ul {
  padding-left: 0;
  width: 20em;
  list-style-type: none;
  border: 1px solid darkgray;
  vertical-align:top;
}

.delete_criteria li {
  padding: 2px 4px;
}

.delete_criteria li.selected {
  background-color: #3399FF;
  color: white;
}

I have read the question below but it only shows you how to set the value to a hardcoded value irrespective of users situation.

What is the browser-default background color when selecting text?

Answer 1

Do you mean the CSS initial value?

.customcomponent li.selected {
  background-color: initial;
  color: initial;
}

Reference: https://www.w3schools.com/cssref/css_initial.asp

Answer 2

Well, depending on what exactly you mean, and how you want to go about this, there are a number of potential solutions. CSS has the keyword initial, which resets a CSS property to its "default" value. Something else that might work in certain contexts is inherit. The table provided in the linked question, provides browser-specific default color codes.

Safari 6.0.3 Mac*: #B4D5FE

Chrome 26.0.1410.65 Mac*: #ACCEF7

Firefox 19.0 Mac*: #B4D5FF

Chrome 26.0.1410.64 m Windows 8+: #3297FD

Firefox 20.0.1 Windows 8+: #3399FF

Safari 5.1.7 Windows 8+: #3298FD

Internet Explorer 10.0.4 Windows 8+: #3399FF

Another reference that might help you, is this CSS Default Browser Values table from W3 Schools.

If you're looking to change or modify the "selection" color, when the user selects text on the page, use the ::selection pseudo-selector.

.customcomponent li::selected {
    background-color:#3399ff;
    color:white;
}

/*  or...  */

/*  note that the pseudo-selector is not the class name */
.customcomponent li.selected::selected {
    background-color:#3399ff;
    color:white;
}

I hope any of this helps.

Answer 3

You can try using System Colors in CSS2, but its Deprecated already with CSS3 appearance.

System colors refer to Operating system colors and not User Agent colors.

.highlight {
   color: HighlightText;
   background-color: Highlight;
   }

<div class="highlight">Highlight</div>

Discussing appearance in editors draft

Here are some pointers into the appearance spec and its issues: Note: This specification intentionally refrains from making the appearance of all possible form controls and sub-controls available as values, as had previously been attempted by earlier proposals for this property and by several UA vendors in experimental implementations. Experience has shown that such a list would be very long and not practical to maintain, and UAs would need to add non-standard values to account for the behavior of non-standard pseudo-elements sometimes used to implement form controls. Moreover, many values of such an enumeration only make sense on a single element or pseudo-element, and are never used outside of the UA stylesheet. Instead, this specification only provides auto, none. UAs cannot therefore use the appearance property in the UA stylesheet to give each control its native look and feel, and must use appearance: auto instead.

Authors desiring to make certain elements in their document look and behave like native form controls should use the correct element in the markup language of the document rather than attempt to use this property or its experimental variants.

Future version of this specification may add a few more values for commonly desired appearances if compability with content written for experimental implementations proves problematic. So far, experience indicates that this is not the case. Even if this were to happen, it is not anticipated that the property would grow to cover all possible controls and sub-controls.

CSS3 dropped features

Thoughts from svgeesus

System colors were introduced from Java, which wanted to make native-looking dialogs matching the then-current windowing systems (Windows 95 and MacOS 7). It was unable to do even that, and the introduction of titlebar gradients in Windows 98 made it clear that chasing platform look would always be an elusive, moving target. In addition, the security implications of being able to accurately fake native UI were becoming apparent. appearance was an attempt to match native appearance without specifying exactly what that was like. The timeframe there was the appearance of brightly-colored iMacs whose UI theming reflected the case color (there was a flavor keyword for that, too). these proposals were too vaguely worded to really be implementable, saw little developer interest and thus were also dropped.

How do we proceed with scenarios where we have to style elements to look as native as possible?

With great caution and a full understanding of the spoofing risks involved; by deciding exactly what UI on what platform at what point in time you want to emulate; and with the realization that your styling will be fragile and need re-doing every few years.

Answer 4

Here, I'm doing it with click event, you can hook it on onLoad, or in any jQuery/Javascript events you want, and once you have the color code, you can use it to set to any field.

    
 function knowMyColor(){
 var element = document.getElementById('myId'),
    style = window.getComputedStyle(element),
    color = style.getPropertyValue('color');
    //alert("I'm of" + color + " color");
    if(color.startsWith("#")){
      console.log(color);
    }
    else{
      convertRGBtoHex(color);
    }
 }
 
function convertRGBtoHex(RGBcolor){
  var res = RGBcolor.substring(4).slice(0, -1);
  var rgb = [];
 var nRes = res.split(/\s*,\s*/).forEach(function(myString) {
    rgb.push(parseInt(myString));
});

var hexColor = rgbToHex(rgb[0],rgb[1],rgb[2]);
console.log(hexColor)
}

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

.myClass {
   color: #502147;
   background-color: yellow;
   }

<div id="myId" class="myClass" onClick="knowMyColor()">What is my color? Click Me..!!</div>

Let me know if this is you want, if this is not u were looking for, I would not mind deleting my answer. :)

Answer 5

There is a way to get the selection color, however it always returns transparent.

getComputedStyle(element, '::selection').backgroundColor;    
getComputedStyle(element, '::-moz-selection').backgroundColor; 

//rgba(0, 0, 0, 0);

Both will return transparent as value. Browser won't override OS default or won't let the user access the OS defaults.

Its best to maintain a map of such default values as already mentioned above.