• CSS

CSS를 이용한 INPUT NUMBER 화살표없애기 / SELECT 오른쪽 화살표 없애기

2018-11-09 171

설명

  • 카카오톡 링크

CSS를 이용한 INPUT NUMBER 화살표없애기 / SELECT 오른쪽 화살표 없애기입니다.

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style>
	.line {display:inline-block; width:100%;}
	.line ul {display:inline-block; width:100%}
	.line ul li {display:inline-block; width:100%}
	.line ul li input[type="number"].effect_one::-webkit-inner-spin-button, .line ul li input[type="number"].effect_one::-webkit-outer-spin-button{-webkit-appearance: none;}
	.line ul li select.effect_two {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
</style>
<h3 class="view_h3 first_h3">INPUT NUMBER 오른쪽 위아래 화살표없애기</h3>
<div class="line">
	<ul>
		<li><input type="number" name="" id="" value="" title="" /></li>
		<li><input type="number" name="" id="" value="" title="" class="effect_one" /></li>
	</ul>
</div>
<h3 class="view_h3">SELECT 오른쪽 화살표 없애기</h3>
<div class="line">
	<ul>
		<li>
			<select name="" id="" title="">
				<option value="">test</option>
			</select>
		</li>
		<li>
			<select name="" id="" title="" class="effect_two">
				<option value="">test</option>
			</select>
		</li>
	</ul>
</div>