sourcetip

'선택' 상자의 자리 표시자를 만들려면 어떻게 해야 합니까?

fileupload 2023. 4. 8. 09:11
반응형

'선택' 상자의 자리 표시자를 만들려면 어떻게 해야 합니까?

문자 입력에 자리 표시자를 사용하고 있는데 잘 되고 있어요.하지만 제 선택 상자에도 자리 표시자를 사용하고 싶습니다.물론 이 코드를 사용할 수 있습니다.

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

그러나 'Select your option'은 옅은 회색 대신 검은색으로 표시됩니다.따라서 CSS 기반 솔루션이 될 수 있습니다.jQuery도 괜찮아요.

이렇게 하면 드롭다운에서 옵션이 회색으로 표시됩니다(따라서 화살표를 클릭한 후).

option:first {
    color: #999;
}

문제는 다음과 같습니다.선택 상자에 플레이스 홀더를 작성하려면 어떻게 해야 합니까?하지만 이미 답변이 왔어요, 건배.

이 값을 사용하면 (실제 옵션을 선택한 후에도) 선택한 값이 항상 회색으로 표시됩니다.

select {
    color: #999;
}

비 CSS - JavaScript/jQuery 응답 없음:

<label>Option name
<select>
    <option value="" disabled selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>
</label>

갱신(2021년 12월):

이 기능은 최신 Firefox, Chrome 및 Safari에서 작동합니다.예전에는 댓글에서 지적했듯이 많은 브라우저에서는 작동하지 않았습니다.

우연히 이 질문을 하게 되었습니다. Firefox와 Chrome에서는 (적어도) 다음과 같이 동작합니다.

<style>
select:invalid { color: gray; }
</style>
<form>
<select required>
    <option value="" disabled selected hidden>Please Choose...</option>
    <option value="0">Open when powered (most valves do this)</option>
    <option value="1">Closed when powered, auto-opens when power is cut</option>
</select>
</form>

[비활성화(Disabled)]옵션은<option>키보드를 모두 할 수 있습니다.단, '마우스'와 '키보드'를 사용하는 'display:none'를 사용하면 키보드 화살표를 사용하여 계속 선택할 수 있습니다.'display:none'은 목록 를 '처럼 할 이다.style은 '나이스'처럼 보이게 할 뿐이다.

빈 " " " 를 합니다.value"플레이스 홀더" 옵션의 속성을 사용하면 검증(필수 속성)이 "플레이스 홀더"를 갖는 문제를 해결할 수 있으므로 옵션이 변경되지 않았지만 필수인 경우 브라우저는 사용자에게 목록에서 옵션을 선택하라는 메시지를 표시합니다.

갱신(2015년 7월):

이 방법은 다음 브라우저에서 동작하는 것으로 확인되었습니다.

  • Google Chrome - v.43.0.2357.132
  • Mozilla Firefox - v.39.0
  • Safari - v.8.0.7(플레이스 홀더는 드롭다운에 표시되지만 선택할 수 없음)
  • Microsoft Internet Explorer - v.11 (플레이스 홀더는 드롭다운에 표시되지만 선택할 수 없음)
  • Project Spartan - v.15.10130 (플레이스 홀더는 드롭다운에 표시되지만 선택할 수 없음)

갱신(2015년 10월):

제거했습니다.style="display: none" 속성 HTML5를 합니다.hidden폭넓은 지지를 받고 있습니다.hidden원소는 와 유사한 특성을 가지고 있다display: none Explorer, ( Spartan은 ) Safari, Explorer, (Safari),option드롭다운에는 표시되지만 선택할 수 없습니다.

갱신(2016년 1월):

?select는 「」입니다.required 해서 쓸 수 요.:invalid 유사 : CSS를 할 수 .select'어디로 가느냐'는 '이렇게요. :invalid 홀더 있기 합니다.option.

되면, 「」는:invalid유사 클래스가 폐기됩니다.로 사용하실 도 있습니다.:valid원하신다면.

대부분의 브라우저는 이 유사 클래스를 지원합니다.Internet Explorer 10 은 커스텀 에서 가장 적합합니다.select 등의 (Chrome/Safari Mac)의 .select 스타일을위해 를 표시합니다.background-color ★★★★★★★★★★★★★★★★★」color호환성에 대한 자세한 내용은 developer.mozilla.org에서 확인할 수 있습니다.

Chrome의 네이티브 요소 모양 Mac:

Chrome에서 박스 네이티브 Mac 선택

Chrome에서 변경된 테두리 요소 Mac 사용:

Chrome에서 선택 상자 Mac 변경

필수 필드의 경우 최신 브라우저에는 순수 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 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; }

JavaScript:

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

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

작업 예: http://jsfiddle.net/Zmf6t/

''을 ' 속성'에요.option래와 ★★★★★★★★★★★★★★★★★★★★★★★★★★

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

다음 솔루션은 JavaScript 없이 Firefox에서도 작동합니다.

option[default] {
  display: none;
}
<select>
  <option value="" default selected>Select Your Age</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

저도 같은 문제가 있어서 검색을 하다가 이 질문을 하게 되었고, 저에게 좋은 해결책을 찾은 후 누군가 도움이 될 수 있다면 여러분들과 공유하고 싶습니다.

여기 있습니다.

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;
}

JavaScript:

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

이 첫 선택을 컬러가됩니다.place_holder.

@으로 @user1096901 Internet Explorer 를 할 수 .place_holder 다시 를 선택합니다.

JavaScript나 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 함수는 새로 고침 버그를 수정합니다.

선택 옵션에는 플레이스 홀더가 표시되지 않습니다.는 '아까부터'를 .hidden옵션에 플레이스 홀더 옵션에는 .selected아트리뷰트★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

select:not(:valid) {
  color: #999;
}
<select required>
    <option value="" hidden>Select your option</option>
    <option value="0">First option</option>
    <option value="1">Second option</option>
</select>

여기 David의 답변(승인된 답변)을 수정했습니다.그의 답변에서, 그는 비활성화된 선택된 속성을option태그가 붙어있지만 숨김태그도 넣어두면 훨씬 더 잘 보일 거예요

에 option'두르'는 '선택'을 선택해주세요.

<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>

  1. selected는 페이지 .
  2. disabled는, 폼 되는 것을 합니다.
  3. hidden.

    <select>
        <option selected disabled hidden>Choose an Option</option>
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
</select>

정답의 징후가 보입니다만, 이 모든 것을 종합하면 다음과 같은 솔루션이 됩니다.

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>

HTML에는 Cool 속성이 있으며 이를 사용하여 select 속성의 플레이스 홀더를 만들 수 있습니다.나의 경우 다음 코드를 사용하고 있으며 필요에 따라 변경할 수 있습니다.

 <select ref={relationship} required className="sellertype">
          <option value="" disabled selected hidden>Select Your Seller Type</option>
          <option value="1">Importer</option>
          <option value="2">Exporter</option>
          <option value="3">Local Seller</option>
          <option value="4">Local Buyer</option>
        </select>

이제 "셀러 유형 선택"이 자리 표시자로 작동합니다.

Angular를 사용하는 경우 다음과 같이 합니다.

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

이 HTML + CSS 솔루션은 저에게 효과가 있었습니다.

form select:invalid {
  color: gray;
}

form select option:first-child {
  color: gray;
}

form select:invalid option:not(:first-child) {
  color: black;
}
<form>
  <select required>
    <option value="">Select Planet...</option>
    <option value="earth">Earth</option>
    <option value="pandora">Pandora</option>
  </select>
</form>

옵션의 을 '어느 쪽으로 하다'로 할 수 있습니다.gray 는 , 으로 합니다.none을합니다.select에 ' '로gray을.input벤벤 to to to event it event event event to event event event event event event로 설정하는 이벤트 청취자.black.

select > option:not(:first-of-type) {
  color: black;
}
<select style='color:gray' oninput='style.color="black"'>
  <option style='display:none'>
    Choose an option
  </option>
  <option>
    1
  </option>
  <option>
    2
  </option>
  <option>
    3
  </option>
</select>

「 」의 customElement API:

class placeholderSelect extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<select style='color:gray' oninput='style.color="black"'>
  <option style='display:none'>
    ${this.getAttribute('data-placeholder')}
  </option>
  ${this.innerHTML}
</select>`;

    Array.from(this.children[0].children).forEach(function(el, i) {
        el.style.color = 'black';
    });
  }
}

customElements.define('placeholder-select', placeholderSelect);
<placeholder-select data-placeholder='Choose an option'>
  <option>
    1
  </option>
  <option>
    2
  </option>
  <option>
    3
  </option>
</placeholder-select>

JavaScript의 또 다른 가능성:

 $('body').on('change', 'select', function (ev){
    if($(this).find('option:selected').val() == ""){
        $(this).css('color', '#999');
        $(this).children().css('color', 'black');
    }
    else {
        $(this).css('color', 'black');
        $(this).children().css('color', 'black');
    }
});

JSFiddle

MattW의 답변을 바탕으로 플레이스 홀더 선택 옵션을 유효한 선택 후 드롭다운 메뉴에 표시되도록 할 수 있습니다.플레이스 홀더를 선택한 상태에서만 조건부로 숨길 수 있습니다(따라서 선택 항목은 : invalid).

select:required:invalid {
  color: gray;
}
select:invalid > 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>

이 방법은 나에게 효과적이다.

<select class="form-control">
    <option value="" readonly="true" hidden="true" selected>Select your option</option>
    <option value="1">Something</option>
    <option value="2">Something else</option>
    <option value="3">Another choice</option>
</select>

★★[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>

선택될 때까지 SELECT를 회색으로 하고 싶었기 때문에 이 HTML의 경우:

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

다음 CSS 정의를 추가했습니다.

select { color: grey; }
select:valid { color: black; }

Chrome/Safari나 다른 브라우저에서도 정상적으로 동작하고 있습니다만, 아직 확인하지 않았습니다.

여기 아름답게 동작하는 CSS 솔루션이 있습니다.콘텐츠는 포함된 요소 뒤에 추가됩니다(및 컨테이너에 대해 상대적인 절대 위치). ( : after pseudo-class )

명령어(attr(플레이스홀더)를 사용한 곳에서 정의한 플레이스홀더 속성에서 텍스트를 가져옵니다.또 다른 핵심 요소는 포인터 이벤트입니다. 없음 - 이를 통해 플레이스 홀더 텍스트를 클릭하면 선택 항목으로 이동할 수 있습니다.그렇지 않으면 사용자가 텍스트를 클릭해도 드롭 다운되지 않습니다.

선택 디렉티브에 .empty 클래스를 직접 추가하지만, 보통은 angular가 .ng-empty를 추가/삭제합니다(코드 샘플에 Angular 버전 1.2를 삽입하고 있기 때문인 것 같습니다).

(이 샘플에서는 HTML 요소를 Angular로 랩하는 방법도 보여 줍니다).JS는 사용자 지정 입력을 만듭니다.)

var app = angular.module("soDemo", []);
app.controller("soDemoController", function($scope) {
  var vm = {};
  vm.names = [{
      id: 1,
      name: 'Jon'
    },
    {
      id: 2,
      name: 'Joe'
    }, {
      id: 3,
      name: 'Bob'
    }, {
      id: 4,
      name: 'Jane'
    }
  ];
  vm.nameId;
  $scope.vm = vm;
});

app.directive('soSelect', function soSelect() {
  var directive = {
    restrict: 'E',
    require: 'ngModel',
    scope: {
      'valueProperty': '@',
      'displayProperty': '@',
      'modelProperty': '=',
      'source': '=',
    },
    link: link,
    template: getTemplate
  };
  return directive;


  /////////////////////////////////
  function link(scope, element, attrs, ngModelController) {
    init();
    return;


    ///////////// IMPLEMENTATION

    function init() {
      initDataBinding();
    }


    function initDataBinding() {
      ngModelController.$render = function() {
        if (scope.model === ngModelController.$viewValue) return;
        scope.model = ngModelController.$viewValue;
      }

      scope.$watch('model', function(newValue) {
        if (newValue === undefined) {
          element.addClass('empty');
          return;
        }
        element.removeClass('empty');
        ngModelController.$setViewValue(newValue);
      });
    }
  }


  function getTemplate(element, attrs) {
    var attributes = [
      'ng-model="model"',
      'ng-required="true"'
    ];

    if (angular.isDefined(attrs.placeholder)) {
      attributes.push('placeholder="{{placeholder}}"');
    }

    var ngOptions = '';

    if (angular.isDefined(attrs.valueProperty)) {
      ngOptions += 'item.' + attrs.valueProperty + ' as ';
    }

    ngOptions += 'item.' + attrs.displayProperty + ' for item in source';
    ngOptions += '"';
    attributes.push('ng-options="' + ngOptions + '"');

    var html = '<select ' + attributes.join(' ') + '></select>';

    return html;
  }
});
so-select {
  position: relative;
}

so-select select {
  font-family: 'Helvetica';
  display: inline-block;
  height: 24px;
  width: 200px;
  padding: 0 1px;
  font-size: 12px;
  color: #222;
  border: 1px solid #c7c7c7;
  border-radius: 4px;
}

so-select.empty:before {
  font-family: 'Helvetica';
  font-size: 12px;
  content: attr(placeholder);
  position: absolute;
  pointer-events: none;
  left: 6px;
  top: 3px;
  z-index: 0;
  color: #888;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="soDemo" ng-controller="soDemoController">
  <so-select value-property="id" display-property="name" source="vm.names" ng-model="vm.nameId" placeholder="(select name)"></so-select>
</div>

(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>

하지 않기 HTML/CSS를 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>

업데이트: 이 기능(Up/Down/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, 깃허브 （ ( ( ） 。

업데이트: 이 내용을 다시 작성했습니다.목록을 사용하는 대신 선택만 하면 됩니다.이렇게 하면 JavaScript가 없어도 작동합니다(비활성화된 경우).

입력:

<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.

인정받는 솔루션이 마음에 들고 JavaScript 없이도 잘 작동합니다.

제어된 선택 React Component에 대해 이 답변을 채택한 방법을 추가하려고 합니다.왜냐하면 몇 번의 시도가 필요했기 때문입니다.정말 간단한 통합이 될 것 같습니다.react-select이 저장소가 제공하는 놀라운 기능이 필요하지 않은 경우(해당 프로젝트에서는 필요 없음) 번들에 킬로바이트를 추가할 필요가 없습니다. ★★,react-select에서 플레이스 를 다양한 복잡한 합니다.inputs ★★★★★★★★★★★★★★★★★」html★★★★★★★★★★★★★★★★★★.

React에서는 제어된 컴포넌트에 대해selected를 선택합니다.를 ""를 합니다.value의 탓으로 select값이 옵션 자체의 값 속성 중 하나와 일치해야 하는 변경 핸들러와 함께 표시됩니다.

예를 들어,

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
    {options}
</select>

, 이 경우 에러가 발생하게 됩니다.selected그 중 하나의 선택지가 있다고 생각해, 그 다음엔?

을 사용법 번째 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★optionselected만 아니라disabled ★★★★★★★★★★★★★★★★★」hidden하다

  1. , 그럼 여기에다가 더해져요.hidden ★★★★★★★★★★★★★★★★★」disabled 정의의 초 attribute the the the the the 에 기인하다option.
  2. 번째 " " " 의 을 합니다.option빈 문자열이 될 수 있습니다.
  3. 값을 합니다.select빈 문자열이 될 수도 있습니다.
state = { selectValue = "" } // State or props or their equivalent

// In the render function
<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
    <option key="someKey" value="" disabled="disabled" hidden="hidden">Select from Below</option>
    {renderOptions()}
</select>

위와 ( 을 ) 할 수 .className★★★★★★★★★★★★★★★★★★★★★」

select:invalid { color: gray; }

폼 검증이 필요하며 최신 브라우저는 이를 처음부터 제공합니다.

따라서 사용자가 필드를 선택할 수 없도록 주의할 필요가 없습니다.이 작업을 수행할 때 브라우저 검증이 잘못된 선택임을 알려줄 것이기 때문입니다.

브라우저에 내장된 검증 함수 checkValidity().

부트스트랩에도 좋은 예가 있습니다.

HTML

<form class="needs-validation">
  <select required>
    <option value="">Please select an option</option>
    <option value="1">Foo</option>
    <option value="2">Bar</option>
  </select>
<form>

자바스크립트

form = document.getElementByClassName('needs-validation');
if(form.checkValidity() === true) {
  //form validation succeeded
} else {
  //form validation failed
}

이 스레드에서 제공되는 답변 간의 다양한 스타일링과 기능 때문에 아래 표는 제공되는 HTML, HTML+CSS 및 HTML+CSS+Javascript 솔루션 각각에 대한 스타일링과 적용 가능한 폼 로직을 명확히 합니다.

어떤 이유에서인지 테이블이 마크업에 허용되지 않기 때문에 코드 포맷을 사용해야만 했습니다.
HTML 테이블은 코드 스니펫을 사용하여 테이블 제한을 회피하기 위해 제공됩니다.

는 이 이음음음음음음음음음음음 this this this this this i라고 해 두었습니다.community wikiJQuery, React, Angular, CoffeeScript는 JQuery, React, Angular, CoffeeScript입니다.

         | Technologies |                                                                Styling                                                                |
  Post   | CSS | Java-  | Select: Placeholder |  Select: valid option  |                  Option: placeholder                    |     Option: valid option     |
   ID    |     | script | Color |  Validation | Color |    Required    | Visibility | Selectable | Color |   Cond. formatting    | Color |   Cond. formatting   |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
41167307 | No  |   No   | Black |   Invalid   | Black |      Yes       |  Visible   |     No     | Grey  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
50200912 | No  |   No   | Black |    Valid    | Black |       No       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
5859221  | No  |   No   | Black |    Valid    | Black |       No       |  Visible   |     No     | Grey  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
38120777 | No  |   No   | Black |    Valid    | Black |       No       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
54860799 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
52661024 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
8442831  | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
29806043 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
61966461 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  | select:valid{visible} | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
44406771 | Yes |   No   | Grey  |   Invalid   | Grey  |      No        |  Visible   |     No     | Grey  |          No           | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
40603035 | Yes |   No   | Black |    Valid    | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
22994211 | Yes |   No   | Grey  |    Valid    | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
21722343 | Yes |   No   | Grey  |    Valid    | Grey  |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
48960650 | Yes |  Yes   | Grey  |   Invalid   | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
5805194  | Yes |  Yes   | Grey  |    Valid    | Black |      No        |  Visible   |    Yes     | Black |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
50840409 | Yes |  Yes   | Grey  |    Valid    | Black |      Yes       |  Visible   |    Yes     | Grey  |          No           | Black |          No          |

하여 수행할 수 옵션 JavaScript를 . 기본 선택 옵션을 설정해야 합니다.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>

다음 답변을 참조하십시오.

<select>
        <option style="display: none;" value="" selected>SelectType</option>
        <option value="1">Type 1</option>
        <option value="2">Type 2</option>
        <option value="3">Type 3</option>
        <option value="4">Type 4</option>
</select>

언급URL : https://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box

반응형

'sourcetip' 카테고리의 다른 글

SQL Server에서 임시 테이블을 작성할 때 #를 사용해야 합니까?  (0) 2023.04.13
MS Excel - 구분 기호 포함  (0) 2023.04.13
HTML 체크박스를 읽기 전용으로 설정할 수 있습니까?  (0) 2023.04.08
DISTINCT를 사용하여 카운트(*)를 선택합니다.  (0) 2023.04.08
기존 테이블에 기본 키 추가  (0) 2023.04.08

'sourcetip'의 다른글

  • 현재글'선택' 상자의 자리 표시자를 만들려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바