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

Question

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

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

我的问题是如何在失焦时消除微弱的蓝色边框，并在聚焦时发光？

HTML：

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

LESS：

#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>

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