체크박스나 라디오버튼의 테두리를 한꺼번에 없앨

국내에 웹 사이트들이 웹 표준을 지키고 OS나 브라우저와 관계 없이 접근성을 향상 시키기 위한 사이트 버그 신고 및 문제 해결을 위한 게시판입니다.
댓글 게시
addiction

체크박스나 라디오버튼의 테두리를 한꺼번에 없앨

게시물 작성자 addiction » 2007 02 15 01:03 38

체크박스나 라디오버튼의 테두리를 한꺼번에 없앨수는 없나요..?

지금까지는 일일히 class 를 써서 적용을 시켰는데요..
<input> 이런식으로 말이죠..

그런데 이거를 한꺼번에..
체크박스나 라디오버튼 들의 테두리를 없앨 수는 없는지
궁금합니다.

dece24
서포터즈
서포터즈
게시물: 83
참여됨: 2006 05 04 02:44 45
위치: 대전
연락:

방법은 있지만 브라우저가 지원않음.

게시물 작성자 dece24 » 2007 02 18 05:12 58

CSS 선택자를 사용하는 방법중에 애트리뷰트 선택자 라는 것이 있습니다.
http://trio.co.kr/webrefer/css2/selecto ... -selectors

즉, input type="checkbox" 또는 input type="radio" 와 같이 특정 애트리뷰트와 애트리뷰트 값을 지니는 녀석들에게만 스타일을 지정할 수 있다는 이야기 입니다.

위 예제를 가지고 애트리뷰트 선택자를 사용하면 다음과 같습니다.
input[type=checkbox], input[type=radio] { border:none; }

그러나, 요거 FF2 에서 지원하지 않는것 같군요. 아마 IE6 에서도 마찬가지일 껍니다.
IE7, Opera9 에서는 지원되는 것을 확인 하였습니다.
Blog : http://naradesign.net/
MSN : dece24앳hotmail.com
NateOn : dece24kr앳nate.com

화성
서포터즈
서포터즈
게시물: 168
참여됨: 2005 02 17 00:49 53
위치: 구미
연락:

FF는 옛날부터 지원하고 있습니다.

게시물 작성자 화성 » 2007 02 19 21:14 04

그리고 내부적으로 라디오버튼과 체크박스에 CSS가 정의돼 있어서([url]resource://gre/res/forms.css[/url]) 다음 코드를 넣어 시스템의 UI 스타일을 없애야 합니다(참고).

코드: 모두 선택

-moz-appearance: none;
또 테두리 관련 스타일들(border-width, border-style 등)을 !important로 정의해 놓아서 바꾸려면 역시 !important로 정의해야 할 겁니다.

덧. 근데 라디오버튼의 테두리를 없애면 어떤 모양이죠? XP 기본 테마가 아닌 다른 테마를 써서 그런지 어떤 모양인지 모르겠네요.

댓글 게시

누군가 접속

유저들이 이 포럼을 탐색중: 가입된 유저 없음 그리고 3 손님들