0

Guys I don't know how to address or explain this issue, i tried searching it on Google but couldn't find a solution. Take a look at the attached image.enter image description here

Basically its an input field, type = submit. When clicked on it, it expands as shown in the pic. When clicked outside, it goes back to its original shape. Any idea why this happens. The HTML and CSS for this is very simple.

<input class="buynowsml" type="submit" value="Buy now" />

.buynowsml {
   border:none;
   border-radius:2px;
   -moz-border-radius:2px;
   -webkit-border-radius:2px;
   border:1px solid #00a6eb;
   font-size:12px;
   background:#fff !important;
   color:#00a6eb !important;
   font-family: "Gotham Medium",Arial,Helvetica,sans-serif;  
   outline: none;
   margin:0;    
}

Earlier i had faced this issue with input type = text. Now i'm facing this with type = submit. Any idea guys? Thanks.

Sagar Raj
  • 909
  • 3
  • 14
  • 34
  • Please, post your jsfiddle. It might happen for several reasons(Css, Jquery). Jsfiddle makes easier to solve the problem. – Alex Oct 16 '15 at 07:00

1 Answers1

0

There seems to be some CSS targeting the submit button's :focus state. Clicking the button gives it focus and clicking away removes focus. This seems to align with the behavior you describe.

You can check what styles are being applied during different states using Chrome's Developer Tools. For instructions, refer to See :hover state in Chrome Developer Tools

Community
  • 1
  • 1
Rick Viscomi
  • 8,180
  • 4
  • 35
  • 50