Question

所以我正在创建一个基于<ul><li>的自定义组件，但看起来更像<select><option>，当点击它时，我希望它的前景/背景设置为任何默认选择颜色。用户系统，通过向该特定组件的css添加内容

目前它只是硬编码为蓝色版本，只适用于特定操作系统上的特定浏览器

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

如果我没有添加上面的CSS，那么当您选择它时没有明显的变化。我想要做的是设置为默认值，因为此伪代码将演示

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

但我不知道要用

替换 default-selection-background-color 和 default-selection-foreground-color

显示html和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;
}

我已阅读下面的问题，但它只显示如何将值设置为硬编码值，而不考虑用户的情况。

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

Answer 1

您可以尝试在CSS2中使用System Colors，但已经弃用CSS3外观。

系统颜色是指操作系统颜色，而不是用户代理颜色。

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

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

讨论appearance in editors draft

以下是appearance规范及其问题的一些指示：   注意：本规范有意避免制作   可用的所有可能的表单控件和子控件的外观   价值，正如先前为此提出的建议所尝试的那样   属性和几个UA供应商的实验性实施。   经验表明，这样的清单会很长而不是   实际维护，UAs需要添加非标准值   有时候考虑非标准伪元素的行为   用于实现表单控件。而且，这样的很多价值观   枚举只对单个元素或伪元素有意义，并且   永远不会在UA样式表之外使用。相反，这个   规范仅提供auto，none。因此，UAs不能使用   UA样式表中的外观属性为每个控件赋予它   原生的外观和感觉，必须使用外观：汽车代替。


希望在文档中制作某些元素的作者看起来和     表现得像本机表单控件应该使用正确的元素     文档的标记语言而不是尝试使用它     财产或其实验变体。


本规范的未来版本可能   如果兼容性，为常用的外观添加一些值   用于实验性实现的内容证明   有问题的。到目前为止，经验表明情况并非如此。   即使发生这种情况，也不会预料到该财产   将增长到涵盖所有可能的控制和子控制。

CSS3 dropped features

来自svgeesus

的想法

系统颜色是从Java想要制作的   与当时窗口系统匹配的本机对话框   （Windows 95和MacOS 7）。它甚至无法做到，而且   Windows 98中标题栏渐变的介绍清楚地表明了这一点   追逐平台看起来永远是一个难以捉摸的移动目标。在   另外，能够准确伪造的安全隐患   原生UI变得明显。外表是一种尝试   本机外观没有准确指出它是什么样的。该   时间框架上出现了色彩鲜艳的iMacs UI   主题反映了案例颜色（有一个味道关键字，   太）。这些建议实在太含糊不清   可实现的，看到了很少的开发人员的兴趣，因此也是   丢弃。


我们如何处理必须为元素设置样式的场景     看起来尽可能原生？


非常谨慎并充分了解欺骗风险   参与;通过在什么位置确定什么UI在什么平台上   你想要效仿的时间;并意识到你的   造型将是脆弱的，需要每隔几年重新做一次。

Answer 2

在这里，我正在使用click事件，你可以将它挂在onLoad上，或者你想要的任何jQuery / Javascript事件中，一旦你有了颜色代码，就可以用它来设置任何字段。 / p>

    
 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>

让我知道如果你想要这个，如果这不是你想要的，我不介意删除我的答案。：）

Answer 3

您的意思是CSS initial值吗？

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

参考：https://www.w3schools.com/cssref/css_initial.asp

Answer 4

那么，根据您的具体含义以及您希望如何实现这一目标，有许多潜在的解决方案。 CSS有关键字here，它将CSS属性重置为其“默认”值。在某些情况下可能有效的其他内容是initial。 inherit中提供的表格提供了特定于浏览器的默认颜色代码。

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

另一个可能对您有所帮助的参考资料是W3 Schools的linked question表。

如果您要更改或修改“选择”颜色，当用户选择页面上的文字时，请使用CSS Default Browser Values。

.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;
}

我希望其中任何一个都有帮助。

Answer 5

有一种方法可以获得selection颜色，但它始终返回transparent。

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

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

两者都将返回透明值。浏览器不会覆盖操作系统默认值，也不会让用户访问操作系统默认值。

最好保留上面已经提到过的默认值的地图。

如何将颜色设置为与选择颜色相同，因此适用于所有浏览器/操作系统

5 个答案: