html - 변경 - '선택'상자의 자리 표시자를 만드는 방법은 무엇입니까?



css html5 (16)

HTML 만 사용하여 Javascript 사용하지 않고이 작업을 수행 할 수 있습니다. 기본 선택 옵션 disabled=""selected="" 하고 required="". 태그를 선택 required="". 브라우저는 사용자가 옵션을 선택하지 않고 양식을 제출하도록 허용하지 않습니다.

<form action="" method="POST">
    <select name="in-op" required="">
        <option disabled="" selected="">Select Option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <input type="submit" value="Submit">
</form>

텍스트 입력에 자리 표시자를 사용하고 있습니다. 하지만 내 선택 상자에 대한 자리 표시 자도 사용하고 싶습니다. 물론이 코드를 사용할 수 있습니다.

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

그러나 '선택 옵션'은 라이트 그레이가 아닌 검은 색입니다. 그래서 제 솔루션은 CSS 기반 일 수 있습니다. jQuery도 좋습니다.

드롭 다운에서 옵션을 회색으로 만 만듭니다 (화살표를 클릭 한 후).

option:first {
    color: #999;
}

편집 : 질문 : 어떻게 사람들이 선택 상자에서 자리 표시자를 만들 수 있습니까? 그러나 이미 답변을 얻었습니다.

그리고 이것을 사용하면 선택한 값이 항상 회색이됩니다 (실제 옵션을 선택한 후에도).

select {
    color:#999;
}

입력 [type="text"] 선택 요소에 대한 스타일 자리 표시 자

다음 솔루션은 input[type="text"] 요소와 관련된 자리 표시자를 시뮬레이트합니다.

$( '.example' ).change( function ()
{
    $( this ).css( 'color', $( this ).val() === '' ? '#999' : '#555' );
});
.example { color:#999; }
.example > option { color:#555; }
.example > option[value=""] { color:#999; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="example">
    <option value="">Select Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>


HTML / CSS 전용 솔루션에 만족하지 않기 때문에 JS를 사용하여 사용자 정의 select 을 작성하기로 결정했습니다.

이것은 내가 지난 30 분 동안 쓴 것입니다. 따라서 더 나아질 수 있습니다.

데이터 속성이 거의없는 단순한 목록을 작성하기 만하면됩니다. 코드는 자동으로 목록을 선택 가능한 드롭 다운으로 전환합니다. 또한 선택한 값을 보유하는 숨겨진 input 을 추가하므로 양식에서 사용할 수 있습니다.

입력:

<ul class="select" data-placeholder="Role" data-name="role">
  <li data-value="admin">Administrator</li>
  <li data-value="mod">Moderator</li>
  <li data-value="user">User</li>
</ul>

산출:

<div class="ul-select-container">
    <input type="hidden" name="role" class="hidden">
    <div class="selected placeholder">
        <span class="text">Role</span>
        <span class="icon">▼</span>
    </div>
    <ul class="select" data-placeholder="Role" data-name="role">
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li data-value="user">User</li>
    </ul>
</div>

자리 표시 자로 간주되는 항목의 텍스트가 회색으로 표시됩니다. 사용자가 자신의 선택을 되돌리려는 경우를 대비하여 자리 표시자를 선택할 수 있습니다. 또한 CSS를 사용하면 select 모든 단점을 극복 할 수 있습니다 (예 : 옵션의 스타일 지정 불가능).

// helper function to create elements faster/easier
// https://github.com/akinuri/js-lib/blob/master/element.js
var elem = function(tagName, attributes, children, isHTML) {
  let parent;
  if (typeof tagName == "string") {
    parent = document.createElement(tagName);
  } else if (tagName instanceof HTMLElement) {
    parent = tagName;
  }
  if (attributes) {
    for (let attribute in attributes) {
      parent.setAttribute(attribute, attributes[attribute]);
    }
  }
  var isHTML = isHTML || null;
  if (children || children == 0) {
    elem.append(parent, children, isHTML);
  }
  return parent;
};
elem.append = function(parent, children, isHTML) {
  if (parent instanceof HTMLTextAreaElement || parent instanceof HTMLInputElement) {
    if (children instanceof Text || typeof children == "string" || typeof children == "number") {
      parent.value = children;
    } else if (children instanceof Array) {
      children.forEach(function(child) {
        elem.append(parent, child);
      });
    } else if (typeof children == "function") {
      elem.append(parent, children());
    }
  } else {
    if (children instanceof HTMLElement || children instanceof Text) {
      parent.appendChild(children);
    } else if (typeof children == "string" || typeof children == "number") {
      if (isHTML) {
        parent.innerHTML += children;
      } else {
        parent.appendChild(document.createTextNode(children));
      }
    } else if (children instanceof Array) {
      children.forEach(function(child) {
        elem.append(parent, child);
      });
    } else if (typeof children == "function") {
      elem.append(parent, children());
    }
  }
};


// initialize all selects on the page
$("ul.select").each(function() {
  var parent    = this.parentElement;
  var refElem   = this.nextElementSibling;
  var container = elem("div", {"class": "ul-select-container"});
  var hidden    = elem("input", {"type": "hidden", "name": this.dataset.name, "class": "hidden"});
  var selected  = elem("div", {"class": "selected placeholder"}, [
    elem("span", {"class": "text"}, this.dataset.placeholder),
    elem("span", {"class": "icon"}, "&#9660;", true),
  ]);
  var placeholder = elem("li", {"class": "placeholder"}, this.dataset.placeholder);
  this.insertBefore(placeholder, this.children[0]);
  container.appendChild(hidden);
  container.appendChild(selected);
  container.appendChild(this);
  parent.insertBefore(container, refElem);
});

// update necessary elements with the selected option
$(".ul-select-container ul li").on("click", function() {
  var text     = this.innerText;
  var value    = this.dataset.value || "";
  var selected = this.parentElement.previousElementSibling;
  var hidden   = selected.previousElementSibling;
  hidden.value = selected.dataset.value = value;
  selected.children[0].innerText = text;
  if (this.classList.contains("placeholder")) {
    selected.classList.add("placeholder");
  } else {
    selected.classList.remove("placeholder");
  }
  selected.parentElement.classList.remove("visible");
});

// open select dropdown
$(".ul-select-container .selected").on("click", function() {
  if (this.parentElement.classList.contains("visible")) {
    this.parentElement.classList.remove("visible");
  } else {
    this.parentElement.classList.add("visible");
  }
});

// close select when focus is lost
$(document).on("click", function(e) {
  var container = $(e.target).closest(".ul-select-container");
  if (container.length == 0) {
    $(".ul-select-container.visible").removeClass("visible");
  }
});
.ul-select-container {
  width: 200px;
  display: table;
  position: relative;
  margin: 1em 0;
}
.ul-select-container.visible ul {
  display: block;
  padding: 0;
  list-style: none;
  margin: 0;
}
.ul-select-container ul {
  background-color: white;
  border: 1px solid hsla(0, 0%, 60%);
  border-top: none;
  -webkit-user-select: none;
  display: none;
  position: absolute;
  width: 100%;
  z-index: 999;
}
.ul-select-container ul li {
  padding: 2px 5px;
}
.ul-select-container ul li.placeholder {
  opacity: 0.5;
}
.ul-select-container ul li:hover {
  background-color: dodgerblue;
  color: white;
}
.ul-select-container ul li.placeholder:hover {
  background-color: rgba(0, 0, 0, .1);
  color: initial;
}
.ul-select-container .selected {
  background-color: white;
  padding: 3px 10px 4px;
  padding: 2px 5px;
  border: 1px solid hsla(0, 0%, 60%);
  -webkit-user-select: none;
}
.ul-select-container .selected {
  display: flex;
  justify-content: space-between;
}
.ul-select-container .selected.placeholder .text {
  color: rgba(0, 0, 0, .5);
}
.ul-select-container .selected .icon {
  font-size: .7em;
  display: flex;
  align-items: center;
  opacity: 0.8;
}
.ul-select-container:hover .selected {
  border: 1px solid hsla(0, 0%, 30%);
}
.ul-select-container:hover .selected .icon {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="select" data-placeholder="Role" data-name="role">
  <li data-value="admin">Administrator</li>
  <li data-value="mod">Moderator</li>
  <li data-value="user">User</li>
</ul>

<ul class="select" data-placeholder="Sex" data-name="sex">
  <li data-value="male">Male</li>
  <li data-value="female">Female</li>
</ul>

업데이트 :이 기능을 향상 시켰습니다 (위 / 아래 / Enter 키를 사용하여 선택). 출력을 조금씩 정돈하고 이것을 객체로 바꿨습니다. 전류 출력 :

<div class="li-select-container">
    <input type="text" readonly="" placeholder="Role" title="Role">
    <span class="arrow">▼</span>
    <ul class="select">
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li data-value="user">User</li>
    </ul>
</div>

초기화 :

new Liselect(document.getElementsByTagName("ul")[0]);

추가 시험 : JSFiddle , GitHub (이름이 변경됨).

업데이트 : 다시 작성하십시오. 목록을 사용하는 대신 select를 사용할 수 있습니다. 이렇게하면 JS가 없어도 작동합니다 (장애인 경우).

입력:

<select name="role" data-placeholder="Role" required title="Role">
    <option value="admin">Administrator</option>
    <option value="mod">Moderator</option>
    <option>User</option>
</select>

new Advancelect(document.getElementsByTagName("select")[0]);

산출:

<div class="advanced-select">
    <input type="text" readonly="" placeholder="Role" title="Role" required="" name="role">
    <span class="arrow">▼</span>
    <ul>
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li>User</li>
    </ul>
</div>

JSFiddle , GitHub .


JS 또는 CSS는 필요 없으며 단지 3 가지 속성 만 있습니다.

<select>
    <option selected disabled hidden>Default Value</option>
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
</select>

옵션을 전혀 표시하지 않고 옵션의 값을 기본값으로 설정합니다.

그러나 나머지 색상과 동일한 색상의 자리 표시자가 마음에 들지 않으면 다음과 같이 인라인으로 수정할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<title>Placeholder for select tag drop-down menu</title>
</head>

<body onload="document.getElementById('mySelect').selectedIndex = 0">

<select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'"  style="color: gray; width: 150px;">
  <option value="" hidden>Select your beverage</option> <!-- placeholder -->
  <option value="water" style="color:black" >Water</option>
  <option value="milk" style="color:black" >Milk</option>
  <option value="soda" style="color:black" >Soda</option>
</select>

</body>
</html>

분명히 기능과 적어도 선택의 CSS를 분리 된 파일로 분리 할 수 ​​있습니다.

참고 : onload 함수는 새로 고침 버그를 수정합니다.


나는 동일한 문제를 가지고 있었고 검색하는 동안이 질문을 겪었습니다. 그리고 나에게 좋은 해결책을 찾은 후에 어떤 사람들이 그것으로부터 이익을 얻을 수있는 경우를 대비하여 여러분과 공유하고 싶습니다. 여기있다 : HTML :

<select class="place_holder dropdown">
    <option selected="selected" style=" display: none;">Sort by</option>
    <option>two</option>
    <option>something</option>
    <option>4</option>
    <option>5</option>
</select>

CSS :

.place_holder{
    color: gray;
}
option{
    color: #000000;
}

JS :

jQuery(".dropdown").change(function () {
    jQuery(this).removeClass("place_holder");
});

고객이 먼저 회색 색상을 선택할 필요가 없으므로 JS가 place_holder 클래스를 제거합니다. 이 사람이 도움이되기를 바랍니다 :)

업데이트 : IE 브라우저 덕분에 @ user1096901 덕분에 첫 번째 옵션이 다시 선택되었을 때를 대비하여 place_holder 클래스를 다시 추가 할 수 있습니다 :)


나는 정답의 징표를 보았지만 그것을 하나로 모으는 것이 나의 해결책이 될 것이다.

select{
  color: grey;
}

option {
  color: black;
}

option[default] {
   display: none;
}
<select>
    <option value="" default selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>


나에게 이것은 (1) 필수는 아니며 (2) 기본 선택 가능으로 돌아갈 수있는 옵션이 필요하기 때문에 현재 작동하도록 설정할 수 없습니다. jquery를 사용하는 경우 여기에 무거운 옵션이 있습니다.

var $selects = $('select');
$selects.change(function () {
  var option = $('option:default', this);
  if(option && option.is(':selected')){
          $(this).css('color','#999');
  }
  else{
          $(this).css('color','#555');
  }
});

$selects.each(function(){
  $(this).change();
});
option{
    color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="in-op">
    <option default selected>Select Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>


내 공헌은 여기에있다. HAML + 커피점 + SCSS

HAML
=f.collection_select :country_id, [us] + Country.all, :id, :name, {prompt: t('user.country')}, class: 'form-control'
Coffeescript
  $('select').on 'change', ->
    if $(this).val()
      $(this).css('color', 'black')
    else
      $(this).css('color', 'gray')
  $('select').change()
SCSS
select option {
  color: black;
}

CSS 만 사용하면 서버 코드를 변경하고 속성의 현재 값에 따라 클래스 스타일을 설정하는 것이 가능하지만이 방법은 더 쉽고 깨끗합니다.

$('select').on('change', function() {
  if ($(this).val()) {
    return $(this).css('color', 'black');
  } else {
    return $(this).css('color', 'gray');
  }
});

$('select').change();
    select option {
      color: black;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="user[country_id]" id="user_country_id">
  <option value="">Country</option>
                      <option value="231">United States</option>
                      <option value="1">Andorra</option>
                      <option value="2">Afghanistan</option>
                      <option value="248">Zimbabwe</option></select>

자리 표시자를 열 때 회색을 유지하기 위해 더 많은 CSS ( select option:first-child )를 추가 할 수 있지만 그 점에 대해서는 신경 쓰지 않았습니다.


당신이 이런 각도로 이동하는 경우

<select>
    <option [ngValue]="undefined"  disabled selected>Select your option</option>
    <option [ngValue]="hurr">Durr</option>
</select>


변경 시도

$("select").css("color","#757575");
$(document).on("change","select",function(){
    if ($(this).val() != "") {
        $(this).css("color","");
    } else {
        $(this).css("color","#757575");
    }
});

아래 옵션과 같이 숨겨진 속성을 추가했습니다.

<select>
  <option hidden>Sex</option>
  <option>Male</option>
  <option>Female</option>
</select>


아마도이게 뭔가?

HTML :

<select id="choice">
    <option value="0" selected="selected">Choose...</option>
    <option value="1">Something</option>
    <option value="2">Something else</option>
    <option value="3">Another choice</option>
</select>

CSS :

#choice option { color: black; }
.empty { color: gray; }

자바 스크립트 :

$("#choice").change(function () {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty")
});

$("#choice").change();

실례 : http://jsfiddle.net/Zmf6t/


여기 나는 다윗의 대답 (수락 된 대답)을 수정했습니다. 그의 답변에서 그는 옵션 태그에 disabled 및 selected 특성을 넣었지만 숨겨진 태그를 추가하면 훨씬 더 좋아 보일 것입니다. 옵션 태그에 추가 숨겨진 속성을 추가하면 "Durr"옵션을 선택한 후 "옵션 선택"옵션이 다시 선택되지 않습니다.

<select>
    <option value="" disabled selected hidden>Select your option</option>
    <option value="hurr">Durr</option>
</select>


여기 내 꺼야.

select:focus option.holder {
  display: none;
}
<select>
    <option selected="selected" class="holder">Please select</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>


필수 필드의 경우 최신 브라우저에는 순수 CSS 솔루션이 있습니다.

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}
<select required>
  <option value="" disabled selected>Select something...</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>


위의 모든 솔루션과 관련해서는 HTML 사양으로 인해 가장 적합한 것으로 보입니다.

<select>
  <optgroup label="Your placeholder">
    <option value="value">Label</option>
  </optgroup>
</select>

업데이트 : 이 잘못된 대답 나를 용서해, 이것은 확실히 select 요소에 대한 자리 표시 자 솔루션이 아니며 그룹화 된 옵션의 제목은 열린 요소 목록을 열었습니다.





placeholder