select 선택에 따라 테두리 색상 변경
<style>
.ex-select {padding:0.5em; border-radius:0.5em; border:1px solid;}
</style>
<select class="ex-select">
<option value="red" data-color="red">red</option>
<option value="green" data-color="green">green</option>
<option value="blue" data-color="blue">blue</option>
<option value="tomato" data-color="tomato">tomato</option>
<option value="lightblue" data-color="lightblue">lightblue</option>
</select>
<script>
$(function() {
$('.ex-select').change(function(e) {
var $this = $(this);
var c = $this.find('option:selected').data('color');
$this.css({'color':c, 'border-color': c});
});
$('.ex-select').each(function() {
var $this = $(this);
$this.trigger('change');
$this.find('option').each(function() {
$(this).css('color',$(this).data('color'));
});
});
});
</script>
댓글 3개
게시판 목록
개발자팁
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 4646 | PHP | 8년 전 | 2153 | ||
| 4645 | PHP | 8년 전 | 2143 | ||
| 4644 | PHP | 8년 전 | 1641 | ||
| 4643 | PHP | 8년 전 | 1705 | ||
| 4642 | PHP | 8년 전 | 1814 | ||
| 4641 | PHP | 8년 전 | 1883 | ||
| 4640 | PHP | 8년 전 | 2041 | ||
| 4639 | PHP | 8년 전 | 1694 | ||
| 4638 | PHP | 8년 전 | 1610 | ||
| 4637 | PHP | 8년 전 | 1845 | ||
| 4636 | PHP | 8년 전 | 1566 | ||
| 4635 | Mobile | 8년 전 | 10205 | ||
| 4634 | PHP | 8년 전 | 2132 | ||
| 4633 | PHP | 8년 전 | 1721 | ||
| 4632 | PHP | 8년 전 | 1999 | ||
| 4631 | OS | 8년 전 | 7140 | ||
| 4630 | PHP | 8년 전 | 2035 | ||
| 4629 | PHP | 8년 전 | 2075 | ||
| 4628 | PHP | 8년 전 | 5447 | ||
| 4627 | MySQL | 8년 전 | 4249 | ||
| 4626 | OS |
|
8년 전 | 3099 | |
| 4625 | PHP | 8년 전 | 2320 | ||
| 4624 | PHP | 8년 전 | 2219 | ||
| 4623 | PHP | 8년 전 | 1878 | ||
| 4622 | PHP | 8년 전 | 2283 | ||
| 4621 | PHP | 8년 전 | 2030 | ||
| 4620 | PHP | 8년 전 | 2097 | ||
| 4619 | 기타 | 8년 전 | 3829 | ||
| 4618 | PHP | 8년 전 | 2673 | ||
| 4617 | PHP | 8년 전 | 1871 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기