Colors shown differently in different browsers

Question

I have a input text box of #c7e296 color and when in focus then color changes to #668933 but when I test this in different browser they show some different colors on focus.

Can someone explain why?

Below is my code,

.after input[type="text"]:focus {
    border: 2px solid   #668933; 
}

.before input[type="text"] {
    border: 2px solid #c7e296;
    color: #000000;
    font-size: 1em;
}

Answer 1

Some browsers (notably Safari) do a highlight around a focussed input field themselves. So if you set a border, and the browser does its highlight, the colors can bleed together.

You can disable that by putting outline-width: 0 on your :focus rule(s):

.after input[type="text"]:focus {
  border: 2px solid   #668933; 
  outline-width: 0;
}