html - 通过删除边框/发光使文本框变平并融入页面

Question

我有一个文本框，似乎让我们的用户感到困惑，因为他们试图编辑它并且它是不可磨灭的。所以我改变了背景颜色并移除了边框，基本上让它看起来像屏幕上的文本。

下面你可以看到我的有焦点和没有焦点的截图，以及定义盒子的 HTML 和设置它的样式的 LESS。

我的问题是如何在失焦时摆脱微弱的蓝色边框并在对焦时发光？

HTML：

<input class="span1 bg-light-blue" type="text" name="hand_unit_id" id="hand_unit_id" readonly="TRUE" />

较少的：

#hand_unit_id {
    border: none ! important;
}
#hand_unit_id:focus {
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
}

Answer 1

这是您可以解决此问题的另一种方法，它完全绕过了整个样式问题。它也可能具有可访问性的好处。屏幕阅读器用户可能会对您的文本字段感到困惑。

http://jsfiddle.net/isherwood/NHV3g/2

<input id="my_text_box" type="text" value="Scruff" style="display: none;" />
<span id="my_text_span"></span>

内部document.ready：

$('#my_text_span').text($('#my_text_box').val());

Answer 2

如下更改 LESS 可解决此问题。当文本框没有焦点时，似乎有一个框阴影被应用到文本框。

#hand_unit_id {
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
}
#hand_unit_id:focus {
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
}