입력 텍스트의 크롬 기본 테두리

Question

Chrome이 요소에 적용하는 기본 테두리를 이해하려고합니다. 이 예제에서는 입력 텍스트를 사용하고 있습니다. 국경을 얻기 위해 jQuery를 사용하는 경우

나는 크롬 dev에 탭에

$("input").css("border") 
"2px inset rgb(0, 0, 0)" 

있습니다. 크롬의 계산 된 스타일 탭에 표시된 것과 동일하기 때문에 정확하다는 것을 알 수 있습니다.

Howerver 수동으로 "2px inset rgb(0, 0, 0)"을 jacery css을 통해 또는 직접 스타일 시트를 통해 요소의 테두리에 적용하려고하면 매우 다른 테두리가 나타납니다. 내가 그 RGB를 알 수 있습니다 (0, 0, 0) 검은 색이지만 크롬의 기본 테두리 실제로 회색 ...

이다 나는 .. 나는이 http://jsfiddle.net/MicheleC/jE5K7/

편집을 보여 바이올린 혼란이있어 :

이

은 크롬 사용자 에이전트 스타일

이어질

border: 2px inset; 
border-image-source: initial; 
border-image-slice: initial; 
border-image-width: initial; 
border-image-outset: initial; 
border-image-repeat: initial; 

이다

질문 1 : 기본값이 rgb (238, 238, 238) 인 이유는 무엇입니까?

질문 2 : 어떻게 실제 계산 된 색상을 프로그래밍 방식으로 얻을 수 있습니까? 불행하게도 RGB 나를 제공 $("input").css("border-bottom-color") 같은 즉, 뭔가 (0, 0, 0)

질문 3 : 내가 수동으로 border: 2px inset rgb(238, 238, 238);을 설정 (이 무엇 크롬이 계산 말합니다이다) 나는 다른 무언가를 얻는 이유는 무엇입니까?

Answer 1

브라우저는 역사적인 이유로 인해 input 요소를 렌더링 할 때 서로 다른 기이가 있습니다. 초기 구현은 내장 된 루틴을 사용하여 CSS에서 말하려고했던 것에 면역이 다소 영향을받지 않도록했습니다. 일반적인 기본값은 이러한 구현에서 비롯되며 호환성을 위해 예전 페이지를 예전 방식으로 표시하기 위해 CSS가 테두리와 같은 주요 속성을 설정하는 데 사용되지 않는 경우 오래된 구현으로 "폴백"됩니다.

이것은 정상적인 CSS 기반 레이어 위에 렌더링 레이어가 있다는 것을 의미하며, CSS에서 "충분한"렌더링 규칙이 설정되지 않으면 요소가 이전 방식으로 렌더링됩니다. 예를 들어

, 당신은 단지 <input>을 가지고 당신이 jQuery를 방법보다 getComputedStyle (더 직접적인 방법을 사용하여 CSS 속성을 확인하지만, 같은 결과를 제공하는 경우, 당신은 계산 된 CSS 속성. 기본적으로, 즉를 불이행, border: inset 2px의 수 테두리 색을 콘텐츠 색 (일반적으로 기본적으로 검정)으로 설정합니다.그러나 요소가 CSS를 완전히 제어 할 때 렌더링되는 값만 반영합니다. 여기서는 그렇지 않으며 내부 브라우저 기본 렌더링이 사용됩니다. Chrome에서는 테두리가 짙은 회색 1px이고 1px의 여백이 있음을 의미합니다.

border-color 경우에만 초기 브라우저 기본 렌더링이 억제되고 대신 CSS 제어 렌더링이 사용됩니다. 즉, 색상을 변경 한 채 브라우저의 기본 렌더링을 사용하는 대신 지정된 색상의 2px 테두리를 삽입합니다.

이것은 혼란 스럽지만 실용적인면에서는 다소 간단합니다. input 테두리의 브라우저 기본 렌더링을 원하면 테두리 속성을 설정하지 마십시오. 원하지 않으면 모두 브라우저 속성을 원하는 값으로 설정하십시오. 특정 질문에 대해서는

는 :

1. 크롬 개발 도구의 색상 정보 rgb(238, 238, 238) 아마 렌더링 방법 사이에 약간의 간섭에 의해 발생하는 버그입니다. 매우 밝은 회색이며 사용 된 실제 색상과 일치하지 않습니다. 아마도 삽입 된 테두리에서 밝은 색상으로 사용되는 색상 일 것입니다.
2. 계산 된 색상은 사용중인 방식 또는 getComputedStyle으로 표시되지만 CSS 제어 방식의 렌더링에만 적용되며 브라우저 스타일 시트 이외의 스타일 시트 설정없이 <input>에는 적용되지 않습니다.
3. 모든 테두리 속성을 설정하면 CSS로 제어되는 렌더링이 적용됩니다.

Answer 2

는 내가 바로 질문을 이해 100 % 아니에요,하지만 난 당신이 CSS-속성 "개요"생각 될 수있다 생각합니다. 윤곽선을 "없음"으로 설정하면 크롬 표준의 작은 파란색/회색 테두리 (또는 불린 윤곽선)가 표시되지 않습니다.

희망이 도움이됩니다.