1

I use box-shadow to draw borders around selected HTML elements (I set class on them when the user selects them by clicking), because it doesn't interfere with the layout (adds no space around the element and doesn't override the element border). Unfortunately box-shadow doesn't work on some elements, like inputs without setting their -webkit-appearance to none.

Changing the appearance is not an option.

Can I somehow draw a frame around the input without affecting it's style?

  • outline does not work, because it doesn't show border radiuses correctly
  • border does not work, because it adds space + overrides any element border. Changing the box-sizing to border-box is also not an option.
  • could you not use a wrapper div? But I don't seem to recall ever having issues with [box shadows on inputs](http://jsfiddle.net/jbutler483/ohuq4por/)? – jbutler483 May 01 '15 at 15:54

2 Answers2

2

you could try applying border-box to the element then use border styles.

input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;     
    border: solid 1px black;
}
jbutler483
  • 24,074
  • 9
  • 92
  • 145
Aaron
  • 10,187
  • 3
  • 23
  • 39
  • How does this not affect layout? –  May 01 '15 at 15:56
  • the border-box takes into account the width + padding + border to make the complete size of the element without effecting the set size. so a 100px box with padding, border etc. will remain 100px. – Aaron May 01 '15 at 15:58
  • sorry, but i'm not sure what you mean by selection border? – Aaron May 01 '15 at 16:16
  • you would need to set an explicit size on the element for `box-sizing` to take effect though – CupawnTae May 01 '15 at 18:36
1

Using outline doesn't add space for me:

<input><input style="outline:10px solid red"><br/>
<input><input><br/>

(Before this attracts more downvotes, please note the question originally mentioned spacing as the reason outline was not suitable)

Some discussion on outline and border-radius here

Community
  • 1
  • 1
CupawnTae
  • 14,192
  • 3
  • 29
  • 60
  • 1
    Sorry my mistake - there was another reason why i ruled out `outline`. See my edit - but on second thought this might be the best (least intrusive) option though. –  May 01 '15 at 16:03
  • Some commentary on outlines and border radius here http://stackoverflow.com/questions/14896099/is-it-possible-to-create-an-outline-border-with-radius – CupawnTae May 01 '15 at 18:19