在 Javascript 中更改复选框颜色

Change Checkbox Color in Javascript

本文关键字：复选框 颜色 Javascript      更新时间：2023-09-26
<!DOCTYPE html>
<html>
<body>
<form action="form_action.asp" method="get">
  <span style='background-color: red;'>
    <input style="FILTER: progid:DXImageTransform.Microsoft.Alpha( style=0,opacity=50);" type="checkbox" name="vehicle" value="Bike" /></span>I have a bike<br />
  <span style='background-color: red;'>
    <input style="-moz-opacity:0.5" type="checkbox" name="vehicle" value="Car" /></span> I have a car <br />
  <input type="submit" value="Submit" />
</form>
<p>Click on the submit button, and the input will be sent to a page on the server called "form_action.asp".</p>
</body>
</html>

我在网上找到了一些示例并将其拼凑在一起，顶部输入复选框应该适用于 ie，底部应该适用于 FF 和 chrome。两者都不好用。IE看起来很草率，FF和chrome似乎根本不起作用。我正在尝试为复选框列表找出这一点，其中一些复选框根据以前的选择被禁用。我让它适用于大多数浏览器，但有些浏览器不会使框变灰。

所以，我需要弄清楚如何使用javascript使框变灰。这似乎不起作用，document.getelementbyid(elementID).style.background = "#dbdbdb";只是勾勒出盒子的轮廓。

任何帮助都非常感谢

您的清单不需要可点击？

在某些浏览器中禁用它作为简单解决方案，然后增加其他浏览器的不透明度：

document.getElementById(elementID).disabled="disabled";
document.getElementById(elementID).style.opacity="0.5";

那是假设你的背景是黑色的... 应该不会。

否则获取复选框的 x，y 位置：

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;

然后创建一个不透明度的黑色div，其 z 索引更高，绝对位置在复选框前面。

如果它们被禁用，那么你应该使用内置在复选框中的"disabled"属性。这既会禁用它们，又会使它们具有禁用的外观。

相关文章：