테두리가 설정된 경우 버튼을 누르면 html 제출 버튼이 눈에 띄게 싱크되지 않습니다.

Question

아름다운 html 양식 버튼 (입력 유형 = "제출"용)을 설계했습니다. 그러나 나는 그들이 눌렀을 때 더 이상 가라 앉지 않는다는 것을 알고 있습니다. 일반적으로 버튼을 누르면 바로 다음 페이지로 이동하므로 문제가되지 않습니다. 그리고 파이어 폭스에서는 단추의 텍스트 주위에 점선으로 된 윤곽선이 나타나기 때문에 약간 눈에.니다. 그러나 사용자가 사파리에 큰 이미지를 업로드하려고 시도했지만 버튼이 눌 렸거나 이미지가 업로드되고 있다는 것이 명확하지 않았습니다.

멋진 테두리가있는 양식화 된 제출 방법을 사용하면 가장 좋은 방법이 무엇입니까? 나는 자바 스크립트를 사용하여 누르기와 누르기를 감지하고 그에 따라 클래스를 변경할 수 있지만 이것을하기위한 더 쉬운 표준 방법이 필요하다고 생각하니? 그렇지 않다면이 문제를 해결할 좋은 jQuery 라이브러리가 있습니까?

http://jsfiddle.net/gctJq/는 그냥 jQuery UI button widget을 발견 :

여기에 내가 무슨 말입니다! 이것이 쉬운 표준 html 솔루션이 없다면 내가 찾고 있던 것입니다. 나는 다른 요소에 대해 이미 jQuery UI를 사용하여 모든 크기와 색상의 단추를 얻으려면이 기능을 사용자 정의하는 것이 얼마나 어려울 지 궁금합니다. 표준 크기와 색상에 더 적합한 것 같습니다.

Answer 1

당신이 사용

여기에 행동에서 볼 활성 선택을

주목할 필요가

http://jsfiddle.net/gctJq/1/

는 모든 현대의 예상 브라우저 ... 드럼 소리 ... IE에서 작동하는 것입니다 ! 글쎄, 그것은 일종의 ie 8이다. 그러나 그 대신 당신은 텍스트를 타이핑하는 대신에 모든 텍스트를 타이프하는 것을 허용하지 않는다. 텍스트를 입력하면 모든 브라우저에서 똑같이 보일 것이다. 당신의 케이스는 제출시 제출 버튼을 사용 불가능으로 설정하여 데이터가 전송되어 처리 중인지를 명확하게 보여줍니다. 이 같은 것은 실제로 그것이 사실임을 나타낼 것입니다.

<input type="submit" onclick="this.disabled=true;this.value='loading...'" /> 

Answer 2

테두리를 지정하면 브라우저의 기본 스타일이 다소 제거됩니다.

버튼을 눌렀을 때의 모양을 수동으로 지정해야합니다.

또한 양식의 모든 요소에 포커스가있을 때 IE는 제출 버튼에 1px 테두리를 추가합니다. 그것을 제거하는 유일한 방법은 (내가 알고있는) 버튼에 border: none;을 적용하고 다른 방식으로 테두리를 모방하는 것입니다.