다른 브라우저의 상자 그림자가 다른 색상입니까?

Question

어제 나는 내 웹 사이트에서 작은 문제를 인식했습니다. My Box-Shadows는 대부분의 브라우저에서 다르게 보입니다. 그것은 (파이어 폭스 & IE) 레드로 사용하지만, 몇 가지에 완전히 다를 수 :

• 오페라 : 오렌지
• 크롬 : 바이올렛
• 사파리 : 블루

어떻게 그렇게 할 수 있습니까?

input.test { 
    ... 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; 
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; 
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; 
    ... 
} 

input.test:focus { 
    ... 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(159, 48, 57, 0.6); 
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(159, 48, 57, 0.6); 
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(159, 48, 57, 0.6); 
    ... 
} 

그것을 나는 또한 사용 전환 할 수 없습니다 :

내 CSS는 같다? 아니면 평범한가?

전환 CSS :

input.test { 
    ... 
    -webkit-transition: border-color 0.75s ease-in-out, box-shadow 0.75s ease-in-out, color 0.75s ease-in-out, background 0.75s ease-in-out; 
    -moz-transition: border-color 0.75s ease-in-out, box-shadow 0.75s ease-in-out, color 0.75s ease-in-out, background 0.75s ease-in-out; 
    -o-transition: border-color 0.75s ease-in-out, box-shadow 0.75s ease-in-out, color 0.75s ease-in-out, background 0.75s ease-in-out; 
    transition: border-color 0.75s ease-in-out, box-shadow 0.75s ease-in-out, color 0.75s ease-in-out, background 0.75s ease-in-out; 
    ... 
} 

희망 누군가가 나를 도울 수 있습니다. 나는 진정으로 각 브라우저에서 같은 색으로 상자 그림자를 원한다.

Answer 1

좋아, 알았어 : 오페라, 크롬 및 사파리 (더 많은 경우) 브라우저는 자동으로 양식 요소의 윤곽선을 사용합니다. 따라서 불투명도를 사용하는 경우 특히 박스 섀도우의 외관을 변경할 수 있습니다.

는 이러한 문제를 제거 사용하려면 :

input:focus, textarea:focus { 
    outline: 0 none; 
} 

이와 유사한 문제는 여기서 발생했습니다 접근성 이유로 인해 없음 :이 윤곽을 지정하기 위해 일반적으로 나쁜 생각 how to remove textbox outline in Opera