Question

我有像这样的内联CSS（显示部分）用于聚焦元素

    .InfoBox-body input[type=text]:focus,
    .InfoBox-body input[type=password]:focus,
    .InfoBox-body input[type=date]:focus,
    .InfoBox-body input[type=datetime]:focus,
    .InfoBox-body input[type=number]:focus,
    .InfoBox-body input[type=search]:focus,
    .InfoBox-body input[type=time]:focus,
    .InfoBox-body input[type=url]:focus,
    .InfoBox-body input[type=email]:focus,    
    .InfoBox-body select:focus{
        -moz-box-shadow: 0 0 8px #88D5E9;    /* this is sort of blue */
        -webkit-box-shadow: 0 0 8px #88D5E9;
        box-shadow: 0 0 8px #88D5E9;
        border: 1px solid #88D5E9;
    }

现在我在发送之前实现了一些检查（循环表单元素），我使用：

element.focus();

在循环中，当值与预期内容不匹配时。

这是有效的，通过聚焦麻烦元素，但现在我想要更精细:)将焦点颜色＃88D5E9更改为红色。

我试过这种方法

            element.style.cssText = `
                .InfoBox-body input[type=text]:focus,
.InfoBox-body input[type=password]:focus,
.InfoBox-body input[type=date]:focus,
.InfoBox-body input[type=datetime]:focus,
.InfoBox-body input[type=number]:focus,
.InfoBox-body input[type=search]:focus,
.InfoBox-body input[type=time]:focus,
.InfoBox-body input[type=url]:focus,
.InfoBox-body input[type=email]:focus,    
.InfoBox-body select:focus{
    -moz-box-shadow: 0 0 8px #FF0000;
    -webkit-box-shadow: 0 0 8px #FF0000;
    box-shadow: 0 0 8px #FF0000;
    border: 1px solid #FF0000;
}
            `;

但无效。

任何提示？感谢。

Answer 1

好的，既然没有人回答，经过大量的挖掘，这是我的解决方案。首先，我的CSS是嵌入式的，因此更改它意味着需要大量编码，循环遍历

document.styleSheets[]...

找到合适的CSS，找到规则等等。

我需要这个来集中一个错误的输入表单并用RED突出显示，所以在提交时我发现这个工作：

    // element.style['-moz-box-shadow'] = "0 0 8px #FF0000";
        // element.style['-webkit-box-shadow'] = "0 0 8px #FF0000";
        // element.style['box-shadow'] = "0 0 8px #FF0000";
        // element.style['border'] = "1px solid #FF0000";

        element.style.cssText = `

            -moz-box-shadow: 0 0 8px #FF0000;
            -webkit-box-shadow: 0 0 8px #FF0000;
            box-shadow: 0 0 8px #FF0000;
            border: 1px solid #FF0000;

        `;

事实上，两者都在做同样的事情，向该元素添加内联 CSS。

<input id="uname" class="field-long" value="" style="box-shadow: 0px 0px 8px rgb(255, 0, 0); border: 1px solid rgb(255, 0, 0);" type="text">

从样式编辑初始CSS规则似乎有更多逻辑，但目前，这更简单。

现在要在用户点击焦点元素时还原，我只是删除了这个内联和样式来自初始CSS将接管

        element.onclick = function () { 

            console.log('Click '+this.id);

            this.style.cssText = null;

        };

也许有人需要这个。干杯！

Javascript，改变某些元素的CSS聚焦颜色

1 个答案: