입력 필드가 포커스를 가질 때마다 그 필드를 둘러싸는 섹시한 빛이 있다는 것을 알고 계십니까?입력 텍스트 필드 광선에 대한 기본 스타일을 찾는 방법이 있습니까?
너무 자세히 입력하지 않고 입력 필드 외부에서 해당 효과를 다시 작성해야하지만 어디에서나 효과를 지시하는 스타일 시트를 찾을 수 없습니다.
(내가 윤곽 속성을 사용하여, 그것을하는 방법을 알고 등등. 난 그냥 입력 텍스트 필드에 기본적으로 사용되는 정확한 값을 찾을 수있는 방법이 있는지 궁금하네요.)
크롬에는 기본적으로 입력에 대한 개요 스타일이 있습니다. 많은 프로젝트에서이 규칙을 비활성화해야합니다.
크롬 개발자 도구를 사용하여 브라우저 스타일 규칙을 확인하십시오.
여기에이 작업을 수행하는 방법을 참조하십시오의 당신의 브라우저 자동으로 해줍니다. 그래서 스타일 시트를 찾을 수 없습니다.
대답. 나는 그 사실을 알고있다. 나는 그것이 사용하는 특정 값을 얻을 수있는 방법이 있는지 궁금 할 뿐이다. 그래서 다른 곳에서도 그것을 재현 할 수있다. –
실행 파일이있는 디렉토리를 확인하십시오. 기본 스타일 시트가있는 경우 아마도 어딘가에 숨어있을 것입니다. –
나는 거기서 찌른다. 내가 찾은 것을 알려주십시오. –
은 브라우저의 효과 그리고 스타일에서 수동으로 수행해야합니다 없습니다 때문입니다. 말하자면, 각 브라우저가 다르게 수행한다는 점을 명심하십시오 (클라이언트 OS에 따라 다름). 따라서 미리 클라이언트 환경을 알고있는 경우에만 일치시킬 수 있습니다 (닫힌 네트워크에서도 가능).
CSS를 통해이를 수행 할 수 있습니다. Twitter Bootstrap Forms을보고 그들이 어떻게하는지보십시오. 입력 필드 내부를 클릭하십시오. http://jsbin.com/esidas/2/edit#html,live
그것은 box-shadow 및 transition
input[type=text] {
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
input[type=text]:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
당신은이 웹 브라우저에 의해 추가 알고는 브라우저와 OS에 의존에 대한 CSS3 속성을 사용하여 이루어집니다 :
여기에 간단한 작업 예제를 참조하십시오 당신은 정확한 코드를 보여줄 수 없습니다. 정확한 스타일을 찾는 방법은 어렵지 않을 수 있습니다. 입력란에서 'inspect element'옵션을 사용하면 브라우저에서 '계산 된 스타일'을 표시 할 수 있습니다. 어떤 OS에서 어떤 브라우저를 사용하는지 정확하게 말할 수 있다면 우리가 도와 줄 수 있습니다.
당신은 본 적 있어요? –
죄송합니다, 무슨 소리 요? 텍스트 글로우에 대해 말하면, 입력 필드에 집중할 때마다 나타나는 빛입니다. 예 : [link] (http://i.imgur.com/) enox5.png) –
John이 말했듯이 스타일 시트가 없습니다. 시행 착오, 개요, 테두리 및 색상 오류. – Yisela