다른 브라우저에서 필드 광선을 생성하는 것과 동일합니까?

필자는 초점을 맞춘 필드에 빛을 추가하는 데 오랫동안이 기능을 사용하여 오랫동안 Firefox에서 내 페이지에 처음 액세스하여이 기능이 작동하지 않는다는 사실을 알았습니다.다른 브라우저에서 필드 광선을 생성하는 것과 동일합니까?

border: 1px solid #E68D29; 
outline-color: -webkit-focus-ring-color; 
outline-offset: -2px; 
outline-style: auto; 
outline-width: 5px;

다른 페이지에서 복사하여 붙여 넣었습니다. 어떻게 작동하는지 잘 모르겠습니다. Firefox 또는 Explorer에 해당하는 항목은 무엇입니까? 다른 브라우저에서도 비슷한 효과를 낼 수 있습니까? 감사합니다

출처

2011-01-13 lisovaccaro

http://tackoverflow.com/questions/3798919/how-to-simulate-chrome-safari-border-around-active-input-or-textarea-on-other-ele –

웹킷은 "outline-style : auto;"를 처리합니다. 다른 브라우저와 다르게 여러 브라우저에서 비슷한 동작을 원한다면 box-shadow를 사용하는 것이 좋습니다. 오래된 브라우저 (IE8 이하, FF3.0 이전)에는 적용되지 않지만 그렇지 않으면 동일해야합니다. this code

input { 
    border: 1px solid #E68D29; 
    } 
    input.focus { 
    border-color: #439ADC; 
    box-shadow: 0 0 5px #439ADC; /* IE9, Chrome 10+, FF4.0+, Opera 10.9+ */ 
    -webkit-box-shadow: 0 0 5px #439ADC; /* Saf3.0+, Chrome */ 
    -moz-box-shadow: 0 0 5px #439ADC; /* FF3.5+ */ 
    }

사용

는

나는 IE9+, FF4+, Chrome 10+, and Safari 5+에서 크로스 브라우저 빛을 보여주는 결과를 생성 할 수 있었다.

옵션 2) 개요 (웹킷에 표시됨)와 상자 그림자 (다른 브라우저의 경우)의 조합을 사용하여 실험 해 볼 수 있습니다.

옵션 3) Formalize CSS과 같은 라이브러리를 사용하여 교차 플랫폼 입력 스타일을 처리 할 수 있습니다. 결과는 꽤 인상적입니다.

출처

2011-03-23 06:37:50 metavida

다른 브라우저에서 필드 광선을 생성하는 것과 동일합니까?

답변

관련 문제