CSS3의 아름다운 검색 양식. 아름다운 CSS3 검색 양식 디자인하기
레이아웃이 형편없다는 비판을 받았지만 현대 HTML5와 CSS3가 있습니다.
물론 최신 표준이 멋지다는 것을 이해합니다. 그러나 사실 나는 원칙적으로 조판을 주문하고 대부분의 경우 다른 브라우저에서 완전한 ID가 중요하므로 최신 기술을 사용할 수 없습니다. 따라서 저는 주로 브라우저 간 호환성에 중점을 두고 습관적으로 "예전 방식으로" 검색 양식을 구성했습니다.
일반적으로 이 게시물을 통해 상황을 수정하고(마지막 기사 =에 만족하지 못한 사람들을 위해) HTML5 및 CSS3 기술을 사용하여 동일한 검색 형식의 레이아웃 버전을 제공합니다.
결과적으로 일어나는 일의 예가 가능합니다.
HTML5 및 CSS3를 사용하여 이 양식을 배치할 때 손실되는 것은 무엇입니까?
- IE9 이하 - 기본 텍스트(placeholder 속성)가 표시되지 않습니다.
- IE8 이하 - 둥근 모서리와 내부 그림자가 표시되지 않습니다.
- IE7 - 다른 양식 너비를 지정해야 합니다. box-sizing 속성을 지원하지 않습니다.
- IE6 - 하지만 전혀 고려하지 않습니다 =)
다른 최신 브라우저에서는 모든 것이 정상입니다. 위의 단점은 중요하지 않다고 생각하므로 내 사이트에는 최신 기술을 사용하여 설계된 양식을 과감하게 사용할 것입니다.
검색 양식 HTML 코드
다음과 같이 보입니다.
이전 기사의 양식과 비교하여 HTML5 기술에 따라 다음과 같이 변경되었습니다.
- type="text" 속성이 type="search" 로 대체되었습니다.
- 인라인 스크립트가 placeholder="(!LANG:search로 대체됨" .!}
CSS 코드
다음은 주석과 함께 필요한 모든 스타일입니다.
검색( /* 디자인에 따라 필요한 폼 너비 설정 ** 문제 없이 폼이 늘어납니다. */ 너비: 35%; /* 제출 버튼이 절대 위치에 위치하므로 ** 이 속성이 필요합니다. */ position: 상대; ) .search 입력 ( /* 입력에서 테두리 비활성화 */ border: 없음; ) /* 입력 필드의 스타일 */ .search .input ( /* 입력 필드를 양식의 전체 너비로 늘림 */ 너비 : 100%; /* 상단(8px) 및 하단(9px) 패딩으로 인해 ** 폼의 높이를 조정 ** 왼쪽 패딩보다 오른쪽(37px) 더 많은 패딩, ** 제출 버튼이 여기에 배치 */ padding: 8px 37px 9px 15px; /* 인라인 패딩을 포함하는 입력 필드의 너비(100%) 만들기 */ -moz-box-sizing: border-box; box-sizing: border-box; / * 인라인 그림자 추가 */ box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3); /* 둥근 모서리 */ border-radius: 20px, 배경: #EEE, 글꼴: 13px Tahoma, Arial, sans-serif, 색상: #555; 개요: 없음; ) /* 포커스에 대한 입력 필드의 모양 변경 */ .search .input:focus ( box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0, 0,0.4 ); background: #E8E8E8; color: #333; ) /* 제출 버튼 스타일 지정 */ .search .submit ( /* 양식의 오른쪽 가장자리에서 절대적으로 버튼 위치 */ position: absolute; top: 0; right: 0; width: 37px; /* 버튼을 폼의 전체 높이로 늘이기 */ height: 100%; cursor: pointer; background: url(https://lh4.googleusercontent.com/-b- 5aBxcxarY/UAfFW9lVyjI/AAAAAAAABUg/gQtEXuPuIds/s13/go.png) 50% no-repeat; /* 제출 버튼에 투명도 추가 */ opacity: 0.5; ) /* 호버 시 제출 버튼의 투명도 변경 */ .search .submit:hover ( opacity: 0.8; ) /* 이 속성은 브라우저가 ** Chrome과 Safari에서 입력 스타일을 지정할 수 있도록 하기 위해 필요합니다. */ input ( -webkit-appearance: none; )
버전 9 이하의 IE 스타일:
/* 버전 9 미만의 IE에 대해 별도의 스타일을 설정합니다. */ *+html .search ( /* IE7의 경우 다른 브라우저의 너비를 조정하고 오른쪽 ** 패딩을 추가하여 제출 버튼이 제자리에 맞도록 합니다. */ 너비: 28 %; 패딩 : 0 52px 0 0; ) .search .input ( 테두리: 1px solid #DFDFDF; border-top: 1px solid #B3B3B3; padding-top: 7px; padding-bottom: 8px; ) .search .input:focus ( 테두리: 1px solid #CFCFCF; border-top: 1px solid #999; ) .search .submit ( 필터: alpha(opacity=50); ) .search .submit:hover ( 필터: alpha(opacity=80); )
추신이전 기사에 대한 의견을 주신 비평가들에게 감사드립니다! 덕분에 머릿속에 새로운 레이아웃 순간이 생겼습니다.
사이트 공간을 절약하는 검색 양식에 대한 두 가지 옵션. 클릭하면 텍스트 입력을 위해 양식이 확장됩니다. 사용만 CSS3.
HTML
간단한 형태 HTML5꼬리표:
CSS
먼저 스타일을 다시 시작하겠습니다. 웹킷검색 엔진에 추가되는 경향이 있는 브라우저 입력태그 프레임, 닫기 아이콘입니다. 따라서 우리는이 불필요한 모든 것을 제거합니다.
입력( 아웃라인: 없음; ) 입력( -webkit-appearance: 텍스트 필드, -webkit-box-sizing: 콘텐츠 상자, 글꼴 패밀리: 상속, 글꼴 크기: 100%; ) 입력::-webkit-search-decoration , input::-webkit-search-cancel-button ( display: none; /* 검색 및 취소 아이콘 제거 */ )
검색 양식을 만들어 보겠습니다.
모든 속성에 대해 설명하지 않을 것입니다. 검색 입력의 너비가 먼저 값을 갖는다는 점에 유의하십시오. 55픽셀, 로 확장할 예정입니다. 130픽셀초점의 순간에 :집중하다. 재산 이행이 너비 변경을 애니메이션으로 만들 수 있습니다. 글로우에 사용 상자 그림자:
입력( 배경: #ededed url(search-icon.png) 반복 없음 9px 중심; 테두리: 단색 1px #ccc; 패딩: 9px 10px 9px 32px; 너비: 55px; -webkit-border-radius: 10em; -moz- border-radius: 10em; border-radius: 10em; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; ) input:focus ( 너비: 130px; background-color: # fff; 테두리 색상: #6dcff6; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); box-shadow: 0 0 5px rgba(109,207,246,.5); )
에 데모 2 입력검색 필드가 훨씬 더 작아졌습니다. 아이콘만 표시됩니다. 그것을 클릭하면 입력 필드의 너비도 변경됩니다.
#demo-b 입력 ( 너비: 18px; 왼쪽 여백: 10px; 색상: 투명; 커서: 포인터; ) #demo-b 입력:hover ( background-color: #fff; ) #demo-b 입력:focus ( 너비 : 130px; 왼쪽 여백: 32px; 색상: #000; 배경색: #fff; 커서: 자동; )
그리고 텍스트가 투명해집니다.
#demo-b input:-moz-placeholder ( color: transparent; ) #demo-b input::-webkit-input-placeholder ( color: transparent; )
양식은 모든 최신 브라우저에서 작동합니다. 크롬, 파이어폭스, 원정 여행, 그리고 IE8+.
웹 사이트에서 가장 많이 사용되는 요소 중 하나는 검색 양식입니다. 사이트의 사용성을 개선하고 원하는 것을 훨씬 쉽게 찾으려면 검색 양식 디자인에 대해 진지하게 고민해야 합니다.
그래서 오늘은 CSS3 속성을 사용하여 검색 양식을 디자인하는 방법에 대해 알려드리고자 합니다.
과거에 CSS3 검색 양식을 디자인하는 방법에 대한 자습서를 이미 보았을 것입니다. 하지만 오늘은 약간 다른 옵션을 제공하고자 합니다. box-shadow 매개변수를 사용하여 구현된 3D 효과가 있는 검색 양식입니다.
마크업
아래에서 이 양식을 개발하는 데 사용된 HTML 코드를 볼 수 있습니다. 필러는 HTML5를 사용하여 개발되었으며 필요한 모든 속성을 사용했습니다.
처음에는 HTML5에 도입된 type="search"를 사용하고 싶었지만 많은 최신 브라우저와 호환되지 않아 마음을 바꿨습니다. 이제 원래 값을 덮어쓰기 위해 몇 줄의 CSS 코드를 추가해야 합니다.
CSS 코드
아름다운 CSS3 검색 양식을 만드는 데 사용되는 최소한의 스타일을 살펴보겠습니다.
양식 래퍼(
너비: 450px
패딩: 8px
여백: 100px 자동;
오버플로: 숨김;
테두리 너비: 1px;
테두리 스타일: 솔리드
테두리 색상: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
상자 그림자: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-웹킷 테두리 반경: 10px;
테두리 반경: 10px
배경색: #f6f6f6;
background-image: -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, from(#f6f6f6), to(#eae8e8));
배경 이미지: -webkit-linear-gradient(상단, #f6f6f6, #eae8e8);
배경 이미지: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
배경 이미지: -ms-linear-gradient(상단, #f6f6f6, #eae8e8);
배경 이미지: -o-linear-gradient(top, #f6f6f6, #eae8e8);
배경 이미지: 선형 그래디언트(top, #f6f6f6, #eae8e8);
}
양식 래퍼 #search(
너비: 330px
높이: 20px;
패딩: 10px 5px;
왼쪽으로 뜨다;
글꼴: 굵게 16px "lucida sans", "trebuchet MS", "Tahoma";
테두리: 1px 솔리드 #ccc;
-moz-box-shadow: 0 1px 1px #ddd 삽입, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd 삽입, 0 1px 0 #fff;
상자 그림자: 0 1px 1px #ddd 삽입, 0 1px 0 #fff;
-moz-border-radius: 3px;
-웹킷 테두리 반경: 3px;
테두리 반경: 3px
}
양식 래퍼 #search:포커스(
개요: 0;
테두리 색상: #aaa;
-moz-box-shadow: 0 1px 1px #bbb 삽입;
-webkit-box-shadow: 0 1px 1px #bbb 삽입;
상자 그림자: 0 1px 1px #bbb 삽입;
}
양식 래퍼 #search::-webkit-input-placeholder(
색상: #999;
글꼴 두께: 보통
}
양식 래퍼 #search:-moz-placeholder(
색상: #999;
글꼴 두께: 보통
}
양식 래퍼 #search:-ms-input-placeholder(
색상: #999;
글꼴 두께: 보통
}
양식 래퍼 #제출(
플로트:오른쪽;
테두리: 1px 솔리드 #00748f;
높이: 42px;
너비: 100px
패딩: 0;
커서: 포인터;
글꼴: 굵게 15px Arial, Helvetica;
색상: #파파파;
텍스트 변환: 대문자;
배경색: #0483a0;
background-image: -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, from(#31b2c3), to(#0483a0));
배경 이미지: -webkit-linear-gradient(상단, #31b2c3, #0483a0);
배경 이미지: -moz-linear-gradient(상단, #31b2c3, #0483a0);
배경 이미지: -ms-linear-gradient(상단, #31b2c3, #0483a0);
배경 이미지: -o-linear-gradient(상단, #31b2c3, #0483a0);
배경 이미지: 선형 그래디언트(상단, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-웹킷 테두리 반경: 3px;
테두리 반경: 3px
텍스트 그림자: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) 삽입, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) 삽입, 0 1px 0 #fff;
상자 그림자: 0 1px 0 rgba(255, 255, 255, 0.3) 삽입, 0 1px 0 #fff;
}
양식 래퍼 #제출:마우스,
.form-wrapper #제출:포커스(
배경색: #31b2c3;
background-image: -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, from(#0483a0), to(#31b2c3));
배경 이미지: -webkit-linear-gradient(상단, #0483a0, #31b2c3);
배경 이미지: -moz-linear-gradient(상단, #0483a0, #31b2c3);
배경 이미지: -ms-linear-gradient(상단, #0483a0, #31b2c3);
배경 이미지: -o-linear-gradient(상단, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
}
양식 래퍼 #제출:활성(
개요: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) 삽입;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) 삽입;
상자 그림자: 0 1px 4px rgba(0, 0, 0, 0.5) 삽입;
}
양식 래퍼 #submit::-moz-focus-inner(
테두리: 0;
}
브라우저 지원
아래에서 검색 양식을 보여주는 일부 스크린샷을 볼 수 있습니다. 페이지가 이전 버전의 브라우저에서 열리는 경우에도 제대로 작동한다는 것을 알 수 있습니다. 나는 또한 이 CSS3 검색 양식이 완전히 사용할 준비가 되었다고 덧붙이고 싶습니다.
최신 브라우저 Chrome, Firefox, Safari, Opera, IE10:
Opera는 현재 HTML5에서 placeholder 속성을 지원하지만 스타일을 지정할 수 없습니다.
좋은 소식은 IE10이 HTML5 필러도 지원한다는 것입니다.
IE의 레거시 버전(6/7/8):
*
결론적으로
이전 기사를 읽었다면 여기에서 모든 브라우저에서 작동하는 응용 프로그램(롤백 버전이 있거나 없는)을 개발하고 있다는 것을 알고 있을 것입니다. 그리고 이 예도 예외는 아닙니다.
CSS3 양식을 사용하여 검색 블록을 만드는 것 외에도 승인 양식이나 구독 양식을 만들기 위해 쉽게 적용할 수 있습니다.
이 기사는 사이트 검색 양식 레이아웃의 기능을 설명하고 의미 체계 코드 마크업의 예, CSS3 디자인, 그리고 마지막에 약간의 jQuery 마술을 제공합니다.
-
마크업
HTML5가 도래하기 전에 검색 양식은 일반 텍스트 필드로 만들어졌으며 새로운 버전의 마크업 언어가 우리 삶에 점진적으로 도래하면서 특별한 유형의 검색 필드가 등장했습니다. 따라서 최신 사이트의 HTML에서 다음과 같은 내용을 볼 수 있습니다.
FF, Opera, IE9의 코드 결과:
웹킷 엔진(Chrome, Safari)을 기반으로 하는 브라우저에서는 약간 다릅니다.
웹킷의 검색 상자보시다시피 필드에 포커스를 추가하면 하이라이트가 추가되고, 텍스트를 입력하면 지우기 버튼이 나타나고, 클릭하면 필드의 내용이 지워지는 것 자체가 상당히 편리합니다.
CSS 스타일이 없으면 검색 양식이 지금까지는 매우 간단해 보입니다. 이 기사에서는 다음과 같이 시도할 것입니다.
예를 들어: 검색 양식 레이아웃
이전 브라우저에 대한 지원이 계획되지 않은 경우 비어 있는 의미 없는 요소
pseudo-element:before 로 대체할 수 있습니다.검색 양식 디자인의 특징
CSS3 속성을 많이 사용하기로 결정했기 때문에 이러한 기적은 이전 Internet Explorer 브라우저에서 작동하지 않으며 브라우저 간 호환성을 달성하려면 목발을 연결하고 그림으로 작업을 수행해야 합니다.
우선 다음과 같은 몇 가지 기능에 주의를 기울이고 싶습니다.
- 양식화 웹킷 브라우저에서
- 자리 표시자 스타일링
Chrome, Safari 브라우저에서 양식 스타일 검색
.search 클래스를 사용하여 필드에 스타일을 추가해 보겠습니다.
검색( 배경: #d8e6ef; 테두리: 1px solid #000; )
스크린샷 결과:
FF, Opera, Chrome 및 Safari 브라우저에서 검색브라우저에서 평소와 같이 놀라움과 혼란이 있습니다. Chrome에서는 테두리가 이상하게 작동합니다(여백이 마치 패딩을 설정하는 것처럼 나타남). Safari는 규칙을 완전히 무시합니다. 그러나 이 상황에서 해결책이 있습니다. CSS 코드에 다음 규칙을 추가합니다.
검색( -webkit-appearance: 없음; )
이제 웹킷에서는 모든 것이 정상이지만 기본 포커스와 명확한 버튼의 강조 표시 필드에서 여전히 다릅니다. 이러한 요소는 편리한 경우가 많지만 때때로 디자인 아이디어를 망칠 수 있으며 비활성화해야 합니다. 백라이트 제거는 매우 간단합니다.
검색:포커스 ( 아웃라인: 없음; /* 포커스 하이라이트 제거 */ -moz-box-shadow: inset 0 0 2px #000; -o-box-shadow: inset 0 0 2px #000; -webkit-box-shadow : inset 0 0 2px #000; box-shadow: inset 0 0 2px #000; /* 모든 브라우저에 대한 대안으로 inner-shadow 추가 */ )
지우기 버튼을 제거하는 것이 남아 있습니다. 사실, 간단한 십자가를 어떤 종류의 배경, 위치 등으로 교체하여 쉽게 스타일을 지정할 수 있지만 내 예에서는 필요하지 않습니다.
/* 클래스 검색이 있는 요소에 대해서만 규칙 */ .search::-webkit-search-cancel-button ( 표시: 없음; /* 제거된 지우기 버튼 */ ) /* 또는 문서에서 검색 유형이 있는 모든 필드 */ 입력: :-webkit-search-cancel-button ( 표시: 없음; )
자리 표시자 텍스트 도구 설명 서식 지정
불행히도 텍스트 힌트를 사용하면 모든 것이 언뜻보기보다 조금 더 복잡합니다. 첫째, 구형 브라우저는 말할 것도 없고 IE9에서는 작동하지 않으므로 JavaScript는 처음에 필드의 일부 텍스트가 필요한 중요한 위치에서 사용해야 합니다. 둘째, 자리 표시자는 Firefox, Chrome, Safari 브라우저에서 디자인하는 데 적합하지 않으며 Opera에도 전혀 적합하지 않습니다.
:-moz-placeholder ( color: #304e62; /* FF에서 색상 변경 */ ) ::-webkit-input-placeholder ( color: #304e62; /* 웹킷에서 색상 변경 */ )
이러한 선택기는 쉼표로 구분되어 나열되면 작동하지 않으며 각각은 새 줄에서 시작해야 합니다.
나는 어려움이 발생할 수있는 특별한 순간을 고려했으며 나머지는 경험 많은 레이아웃 디자이너에게 문제를 일으키지 않아야합니다.
jQuery 스크립트
마지막으로 양식에 다음과 같은 스크립트를 추가해 보겠습니다.
- 요청을 취소하고 빈 필드를 보낼 때 오류 메시지를 표시하자
- 필드에 집중할 때 하단에 작은 툴팁 추가
jQ의 힘으로 이 모든 것을 구현하는 것은 매우 쉽습니다. 주석이 있는 다음 코드를 얻었습니다.
$(function() ( /* 양식 제출 처리 */ $(".search-form").submit(function() ( var errVal = "empty request"; /* 필드가 비어 있거나 errVal 값을 포함하는 경우 */ if ( $(".search").val() == "" || $(".search").val() == errVal) ( /* 필드에 errVal 값 추가, 배경색 변경 및 */ $( " .search").val(errVal).css((backgroundColor: "rgba(0,0,0,.1)")); /* return false - 양식이 제출되지 않음 */ return false; ); ) ); / * 필드에 포커스가 있을 때 */ $(".search").focus(function() ( /* 필드 값을 공백으로 설정하고 배경색을 기본값으로 설정 */ $(this).val(""). css((backgroundColor : "#d8e6ef")); /* 툴팁 표시 */ $(".notice").fadeIn(400); )); /* 포커스가 제거되었을 때 */ $(".search"). blur(function( ) ( /* 툴팁 제거 */ $(".notice").fadeOut(400); )); ));
물론 더 빠른 스크립트 작업을 위해 스크립트의 클래스를 식별자로 교체하는 것이 가장 좋으며, 문서에 동일한 클래스의 다른 요소가 나타나더라도 스크립트가 깨지지 않습니다.
결과
따라서 사이트에 대한 검색 양식을 설계하고 프로그래밍했으며 최신 버전의 Firefox, Chrome, Opera, Safari 및 IE9+에서 작동합니다. 강한 열망으로 최소한 IE6부터 시작하여 어느 정도 크로스 브라우저 버전을 만들 수 있습니다.
확인됨
- 인터넷 익스플로러 9+
- 오페라
- 파이어폭스
- 크롬
- 원정 여행
프로젝트를 도와주세요
검색 상자는 아마도 가장 일반적인 사용자 인터페이스 요소 중 하나일 것입니다. 인터페이스 사용성 수준에서 작업할 때 세련된 검색 필드를 추가하려는 것은 매우 일반적입니다. 이 자습서에서는 의사 요소를 사용하여 이러한 인기 있는 요소를 만듭니다.
HTML 마크업
이러한 필드를 준비하려면 마크업이 최소화됩니다.
이것은 특별한 HTML5 자리 표시자와 필수 속성을 사용합니다.
- 자리 표시자- 이 속성은 필드가 입력 포커스를 받기 전에 필드의 텍스트 출력을 설정한 다음 텍스트가 숨겨집니다.
- 필수의- 이 속성은 양식을 제출하기 전에 입력 필드에 정보가 있어야 하는 필수 조건을 설정합니다.
HTML5는 또한 type 속성에 대해 새로운 의미를 갖습니다: type="search" . 그러나 브라우저에서 잘 지원되지 않으므로 지금은 사용하지 않습니다.
img 및 input과 같은 HTML 요소에는 콘텐츠가 없습니다. 따라서 :before와 같은 유사 요소는 버튼에 대한 화살표를 표시하지 않습니다.
우리의 경우 이 문제에 대한 해결책은 input type="submit" 대신 button type="submit" 을 사용하는 것입니다. 따라서 ENTER 키를 사용하여 양식을 유지합니다.
CSS
다음은 데모에 필요한 스타일입니다.
텍스트 줄 바꿈 취소
cf:before, .cf:after( content:""; display:table; ) .cf:after( clear:both; ) .cf( zoom:1; )
양식 요소
더 나은 명확성을 위해 브라우저 접두사는 수업 코드에 표시되지 않습니다. 소스 텍스트에서 전체 코드를 볼 수 있습니다.
/* 양식 컨테이너 스타일 지정 */ .form-wrapper ( 너비: 450px; 패딩: 15px; 여백: 150px auto 50px auto; background: #444; background: rgba(0,0,0,.2); border-radius : 10px; box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2); ) /* 텍스트 입력 상자의 스타일 지정 */ .form-wrapper 입력( 너비: 330px, 높이: 20px, 패딩: 10px 5px, float: 왼쪽, 글꼴: 굵게 15px "lucida sans", "trebuchet MS", "Tahoma", 경계: 0, 배경: #eee, 경계 반경: 3px 0 0 3px; ) .form-wrapper 입력:포커스 ( 아웃라인: 0; 배경: #fff; box-shadow: 0 0 2px rgba(0,0,0,.8) inset; ) .form-wrapper 입력::- webkit -input-placeholder ( color: #999; font-weight: normal; font-style: italic; ) .form-wrapper input:-moz-placeholder ( color: #999; font-weight: normal; font-style: italic ; ) .form-wrapper 입력:-ms-input-placeholder ( color: #999; font-weight: normal; font-style: italic; ) /* 양식 제출 버튼 */ .form-wrapper 버튼 ( overflow: visible ; 위치: 상대; 플로트:오른쪽; 테두리: 0; 패딩: 0; 커서: 포인터; 높이: 40px; 너비: 110px 글꼴: 굵게 15px/40px "lucida sans", "trebuchet MS", "Tahoma"; 색상: #fff; 텍스트 변환: 대문자; 배경: #d83c3c; 테두리 반경: 0 3px 3px 0; 텍스트 그림자: 0 -1px 0 rgba(0, 0,0, .3); ) .form-wrapper 버튼:hover( background: #e54040; ) .form-wrapper 버튼:active, .form-wrapper 버튼:focus( background: #c42f2f; outline: 0; ) .form-wrapper 버튼:before( / * 왼쪽 화살표 */ 내용: ""; 위치: 절대; 테두리 너비: 8픽셀 8픽셀 8픽셀 0; 테두리 스타일: 솔리드 솔리드 솔리드 없음; 테두리 색상: 투명 #d83c3c 투명; 상단: 12픽셀; 왼쪽: -6px; ) .form-wrapper 버튼:hover:before( border-right-color: #e54040; ) .form-wrapper 버튼:focus:before, .form-wrapper 버튼:active:before( border-right-color: #c42f2f; ) .form-wrapper 버튼::-moz-focus-inner ( /* Mozilla Firefox에서 버튼 옆의 여분의 공간을 제거합니다 */ border: 0; padding: 0; )
