선택 태그의 자리 표시 자

선택 태그의 자리 표시 자

---

이 질문에 이미 답변이 있습니다.

• '선택'상자의 자리 표시자는 어떻게 만듭니 까? 27 답변

선택 태그에 자리 표시자를 가질 수 있습니까?

<select placeholder="select your beverage">

   <option>Tea</option>

   <option>coffee</option>

   <option>soda</option>

</select>

또는 가능한 해결 방법 일 수 있습니까?

---

편집 : 이것은 내가 작성한 당시에 작동했거나 작동하지만 Blexen이 지적했듯이 사양에 없습니다.

다음과 같은 옵션을 추가하십시오.

<option default>Select Your Beverage</option>

올바른 방법 :

<option selected="selected">Select Your Beverage</option>

---

에 따르면 모질라 개발자 네트워크 , placeholderA의 유효한 속성이 아닙니다 <select>입력.

대신, 빈과 옵션을 추가 value하고 selected다음과 같이 속성. 의 value내용을 의 값 <option>으로 사용하는 기본 동작을 방지하려면 빈 속성이 필수 <option>입니다.

<select>
    <option value="" selected>select your beverage</option>
    <option value="tea">Tea</option>
    <option value="coffee">Coffee</option>
    <option value="soda">Soda</option>
</select>

최신 브라우저 required에서 <select>요소에 속성을 추가 하면 선택한 옵션에 빈 값이있는 경우 사용자가 요소가 속한 양식을 제출할 수 없습니다.

목록 (요소를 클릭 할 때 표시됨) 내에서 기본 옵션의 스타일을 지정하려는 경우 잘 지원되는 제한된 수의 CSS 속성이 있습니다. color그리고 background-color2 개 안전한 베팅하고, 다른 CSS 속성은 무시 될 가능성이 높다.

내 옵션에서 (HTML5에서) 기본 옵션을 표시하는 가장 좋은 방법은 사용자 정의 data-*속성을 사용하는 것입니다. ¹ 회색으로 표시 할 기본 옵션의 스타일을 지정하는 방법은 다음과 같습니다.

select option[data-default] {
  color: #888;
}

<select>
  <option value="" selected data-default>select your beverage</option>
  <option value="tea">Tea</option>
  <option value="coffee">Coffee</option>
  <option value="soda">Soda</option>
</select>

그러나 이렇게하면 입력에 표시된 값이 아니라 드롭 다운 목록 내의 항목에만 스타일이 지정됩니다. CSS로 스타일을 지정하려면 <select>요소를 직접 타겟팅하세요 . 이 경우 현재 선택한 요소의 스타일 만 언제든지 변경할 수 있습니다. ²

사용자가 기본 항목을 선택하는 것을 약간 더 어렵게 만들고 싶다면에서 display: none;CSS 규칙을 설정할 수 있습니다 <option>.하지만 이것이 사용자가 선택하는 것을 막지 는 않는다는 점을 기억 하십시오 (예 : 화살표 키 / 타이핑 사용). 그렇게하기가 더 어렵습니다.

---

_{¹ 이 답변은 이전에 default비표준이고 그 자체로는 의미가없는 속성 의 사용을 권장했습니다 .
² JavaScript를 사용하여 선택한 값을 기반으로 선택 자체의 스타일을 지정하는 것은 기술적으로 가능하지만이 질문의 범위를 벗어납니다. 그러나이 답변 은이 방법을 다룹니다.}

---

<select>

    <option selected="selected" class="Country">Country Name</option>

    <option value="1">India</option>

    <option value="2">us</option>

</select>

.country
{


    display:none;
}

</style>

---

네 가능합니다

이 경우에만 사용 할 수있는 HTML사용자가 설정 한 기본 옵션을 선택 필요 disabled=""와 selected=""선택 태그를 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>

---

이것은 선택 상자 자리 표시 자에 대한 내 기능입니다.

HTML

<select name="country" id="country">
  <option value="" disabled selected>Country</option>
  <option value="c1">England</option>
  <option value="c2">Russia</option>
  <option value="c3">USA</option>
</select>

jQuery

     jQuery(function($) {
      /*function for placeholder select*/
      function selectPlaceholder(selectID){
        var selected = $(selectID + ' option:selected');
        var val = selected.val();
        $(selectID + ' option' ).css('color', '#333');
        selected.css('color', '#999');
        if (val == "") {
          $(selectID).css('color', '#999');
        };
        $(selectID).change(function(){
          var val = $(selectID + ' option:selected' ).val();
          if (val == "") {
            $(selectID).css('color', '#999');
          }else{
            $(selectID).css('color', '#333');
          };
        });
      };

      selectPlaceholder('#country');

    });

---

There is a Select2 plugin allowing to set a lot of cool stuff along with placeholder. It is a jQuery replacement for select boxes. Here is an official site https://select2.github.io/examples.html

The thing is - if you want to disable fancy search option, please use the following option set.

data-plugin-options='
{ 
    "placeholder": "Select status",
    "allowClear": true, 
    "minimumResultsForSearch": -1
}

Especially I like the allowClear option.

Thank you.

---

No need to take any javscript or any method you can just do it with your html css

HTML

<select id="myAwesomeSelect">
    <option selected="selected" class="s">Country Name</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>

Css

.s
{
    color:white;
        font-size:0px;
    display:none;
}

---

     <select>
         <option value="" disabled selected style="display: none;"> placeholder</option>
         <option value="op1">op1</option>
         <option value="op2">op2</option>
         <option value="op3">op3</option>
         <option value="op4">op4</option>
     </select>

---

Try this

HTML

<select class="form-control"name="country">
<option class="servce_pro_disabled">Select Country</option>
<option class="servce_pro_disabled" value="Aruba" id="cl_country_option">Aruba</option>
</select>

CSS

.form-control option:first-child {
    display: none;
}

---

<select>
   <option disabled selected>select your beverage</option>
   <option >Tea</option>
   <option>coffee</option>
   <option>soda</option>
</select>

참고URL : https://stackoverflow.com/questions/17603055/placeholder-for-select-tag