【问题标题】:Disable text-field blue highlight in Chrome Extension?在 Chrome 扩展中禁用文本字段蓝色突出显示?
【发布时间】:2012-03-16 08:07:30
【问题描述】:

我正在开发一个 Chrome 扩展程序,它可以让你编辑一个小文本字段,我发现点击文本字段周围的蓝色突出显示真的很烦人。

有没有办法(最好使用 CSS)使这个突出显示稍微变薄一些?我觉得它有点太厚了,需要减肥。谢谢!

蓝色高亮截图:

【问题讨论】:

    标签: html css google-chrome-extension textfield highlight


    【解决方案1】:

    是的;只需将 'none' 分配给 'outline' 属性:

    input {
        outline: none;
    }
    

    JS Fiddle demo.

    请注意,大纲是一种 UI 功能,用于突出显示当前活动/聚焦的表单元素,删除该视觉提示可能会妨碍某些用户。


    编辑以回应 Beakr(OP)的左撇子评论,在下面的 cmets 中:

    我打算禁用它/修改它,看看它能做什么。

    要调整outline 的样式,您可以访问各个属性:

    elementSelector:focus {
        outline-width: 4px; /* thin, medium, thick or standard CSS length units */
        outline-style: auto; /* or 'inherit', 'none' or border-style (solid, dashed, dotted...) */
        outline-color: #f90; /* standard CSS colors */
    }
    

    JS Fiddle demo.

    上面的内容也可以用简写表示:

    elementSelector:focus {
        outline: 4px auto #f90;
    }
    

    可以使用的最小的可能的轮廓测量是:

    elementSelector:focus {
        outline-width: thin; /* or 1px */
    }
    

    【讨论】:

    • 感谢您的回答!虽然我同意,但我打算禁用它/修改它,看看它能做什么。
    • 那么...您是否愿意更新您的问题以询问您想对大纲做什么
    • 如果你用类似的东西替换它,删除它是可以接受的,例如我已经实现了我自己的焦点样式,如下所示: .formTextInput{ padding: 7px 0px 7px 9px;边框半径:2px;盒子阴影:0 0 0 5px 暗灰色;边框:1px 实心暗灰色;大纲:无;边距:5px; } .formTextInput:focus { box-shadow: 0 0 0 5px 橙色; }
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-06-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多