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개
게시글 목록
| 번호 | 제목 |
|---|---|
| 16429 |
기타
html 색상표
1
|
| 16424 | |
| 16423 |
node.js
NODE_JS + Nunjucks 설정
|
| 16412 |
PHP
한글 초성 추출하기
10
|
| 16408 | |
| 16407 |
JavaScript
input text 에 여러 이벤트 걸기 두기.
1
|
| 16401 | |
| 16395 |
JavaScript
Javascript를 최적화하는 13가지 팁
4
|
| 16394 |
JavaScript
URL이 올바른지 체크
2
|
| 16391 |
JavaScript
IE, Edge 브라우저에서는 해당 사이트가 접속이 안되게 하는 코드
2
|
| 16390 |
JavaScript
구글 맵 독도 표기 되도록.
|
| 16389 | |
| 16387 | |
| 16386 |
JavaScript
js playground
|
| 16382 |
JavaScript
javascript에서 php를 호출하여 내용 변경하기
|
| 16381 | |
| 16377 | |
| 16374 | |
| 16372 | |
| 16356 |
기타
기시판 질문입니다.
6
|
| 16355 |
정규표현식
정규식 테스트 연습 편하게
2
|
| 16354 |
정규표현식
제목에 특수문자 정리하는 정규식
2
|
| 16353 | |
| 16347 | |
| 16346 | |
| 16339 | |
| 16338 |
jQuery
체크박스 시프트(shift) 멀티선택
|
| 16332 |
node.js
Node.js MongoDB Drop
1
|
| 16331 |
node.js
여러 데이터 삭제
1
|
| 16330 |
node.js
Node.js MongoDB 삭제
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기