셀렉트박스에 선택값별 색상 다르게 하려면? 채택완료
어쩌면 기초적인 질문인지는 모르겠습니다.
아래와 같이 셀렉트박스를 작성하였는데요.
여기서 각 선택값별로 색상을 다르게 주는 방법이 있을까요?
<select name="wr_9" id="wr_9" required>
<option value="">선택하세요.</option>
<option value="접수확인"<?php echo ($write['wr_9'] == "접수확인") ? " selected" : "";?>>접수확인</option>
<option value="상담중"<?php echo ($write['wr_9'] == "상담중") ? " selected" : "";?>>상담중</option>
<option value="상담완료"<?php echo ($write['wr_9'] == "상담완료") ? " selected" : "";?>>상담완료</option>
</select>
답변 3개
저도 님과 같은 것을 고민했었는데요.
선택값 별로는 안돼네요.
그래서... 꿩대신 닭 잡았어요.
그냥 셀렉트 태그에 배경색을 상태별로 다르게 주었습니다. ^^; 참고하세요
</p>
<p><select name="wr_9" id="wr_9" required <?=( $write['wr_9'] == "접수확인" ? " style='background:red;'" : ( $write['wr_9'] == "상담중" ? "background:blue;" : ( $write['wr_9'] == "상담완료" ? "background:green;" : "" ) ) )?>>
<option value="">선택하세요.</option>
<option value="접수확인"<?php echo ($write['wr_9'] == "접수확인") ? " selected" : "";?>>접수확인</option>
<option value="상담중"<?php echo ($write['wr_9'] == "상담중") ? " selected" : "";?>>상담중</option>
<option value="상담완료"<?php echo ($write['wr_9'] == "상담완료") ? " selected" : "";?>>상담완료</option>
</select></p>
<p>
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
</p>
<p><style></p>
<p>body {padding:20px;}</p>
<p>.ex-select {padding:0.5em; border-radius:0.5em; border:1px solid;}</p>
<p></style></p>
<p><select class="ex-select"></p>
<p><option value="red" data-color="red">red</option></p>
<p><option value="green" data-color="green">green</option></p>
<p><option value="blue" data-color="blue">blue</option></p>
<p><option value="tomato" data-color="tomato">tomato</option></p>
<p><option value="lightblue" data-color="lightblue">lightblue</option></p>
<p></select></p>
<p> </p>
<p><script></p>
<p>$(function() {</p>
<p>$('.ex-select').change(function(e) {</p>
<p>var $this = $(this);</p>
<p> var c = $this.find('option:selected').data('color');</p>
<p>$this.css({'color':c, 'border-color': c});</p>
<p>});</p>
<p>$('.ex-select').each(function() {</p>
<p>var $this = $(this);</p>
<p>$this.trigger('change');</p>
<p>$this.find('option').each(function() {</p>
<p>$(this).css('color',$(this).data('color'));</p>
<p>});</p>
<p>});</p>
<p>});</p>
<p></script></p>
<p>http://note.tloghost.kr/ex/ex_select.php">http://note.tloghost.kr/ex/ex_select.php
댓글을 작성하려면 로그인이 필요합니다.
기본 셀렉트박스로는 불가능합니다.
별도로 레이블이나 다른 개체로 대체해야 합니다.
https://codepen.io/geedmo/pen/vAjan">https://codepen.io/geedmo/pen/vAjan
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인