0

Ok, so I have the following input field:

#SignUser {
  padding: 12px 15px 12px 15px;
  border: none;
  border-radius: 2px;
  outline: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  position: relative;
  left: 20px;
  top: 20px;
  width:310px;
}

On focus, I want to give this a slight border:

#SignUser:focus {
border: 1px solid black;
}

Before

#1 Visual Aid

After

#2 Visual Aid

It's hard to explain, but it makes the input field move slightly. How can I add a border, but I have the input field stay still?

I apologize if I haven't explained my problem clearly enough, this is my first question on SO.

Cøde Play
  • 167
  • 10
  • The title of your question is not a description of your problem. The `:focus` selector _does_ work. The issue you have is just a cosmetic issue. – Sebastian Simon Apr 14 '16 at 19:44
  • Thanks! To be specific, this [answer](http://stackoverflow.com/a/9612787/6101572) solved my problem... – Cøde Play Apr 14 '16 at 19:45

0 Answers0