Snippet 본문

라운드형 A

등록
윤향재, 이윤용 (등록일 : 2011/09/26    최종수정일 : 2013/05/29)
Type
Mobile
설명
미리보기
Html
<div class="opt_comm">
	<select class="opt_select">
		<option selected="selected" value="0">다른회차 선택</option>
		<option value="1">435회차 (2011.04.02)</option>
		<option value="2">434회차 (2011.03.26)</option>
	</select>
	<span class="box_arrow"><span class="img_sample ico_arrow"></span></span>
</div>
CSS
.img_sample {background:url(/snippet/image?idx=236) no-repeat}
.opt_comm {display:inline-block;overflow:hidden;position:relative;height:24px;padding:0;border:1px solid #cfcfcf;border-radius:3px;-webkit-border-radius:3px;font-size:12px;text-align:center;background-color:#fdfdfd;z-index:0}
.opt_comm .opt_select {display:block;height:24px;padding:0 30px 0 7px;border:0 none;background:none;font-size:13px;-webkit-appearance:none;color:#222}
.opt_comm .box_arrow {position:absolute;right:0;top:0;width:22px;height:100%;border-radius:0 3px 3px 0;border-left:1px solid #e6e6e6;background-color:#fcfcfc;z-index:-10}
.opt_comm .ico_arrow {display:inline-block;overflow:hidden;width:7px;height:5px;background-position:-10px 0;margin:10px 0 0 1px;vertical-align:top}

/* high resolution image */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
.img_sample {background-image:url(/snippet/image?idx=234);-webkit-background-size:20px 8px;background-size:20px 8px}
}

@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
.img_sample {background-image:url(/snippet/image?idx=235);-webkit-background-size:20px 8px;background-size:20px 8px}
}

안내 : 해당 Snippet을 사용하기 위해서는 Daum에서 사용하는 reset.css(global classname포함)를 사용 하셔야 합니다.
※ [ CSS Convention ] 바로가기