html5 - Make a textbox flat and blend into the page by removing border/glow -

i have textbox seems confusing our users since try edit , it's indellible. changed background colour , removed borders have text on screen.

below can see screenshots , without focus, html defines box , less styles it.

my question how rid of faint blue border when out of focus , glow when in focus?

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

here's way might go bypasses whole styling issue altogether. may have accessibility benefits well. screen reader users may confused text field.

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());