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

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