질문자 :Thomas
나는 잘 작동하는 텍스트 입력에 자리 표시자를 사용하고 있습니다. 하지만 내 선택 상자에도 자리 표시자를 사용하고 싶습니다. 물론 다음 코드를 사용할 수 있습니다.
<select> <option value="">Select your option</option> <option value="hurr">Durr</option> </select>그러나 '옵션 선택'은 밝은 회색 대신 검은색입니다. 따라서 내 솔루션은 CSS 기반일 수 있습니다. 제이쿼리도 괜찮습니다.
이렇게 하면 드롭다운에서 옵션이 회색으로 표시됩니다(화살표를 클릭한 후).
option:first { color: #999; }질문은 다음과 같습니다. 사람들이 선택 상자에서 자리 표시자를 만드는 방법은 무엇입니까? 그러나 그것은 이미 대답되었습니다, 건배.
그리고 이것을 사용하면 선택된 값이 항상 회색이 됩니다(실제 옵션을 선택한 후에도):
select { color: #999; }비 CSS - JavaScript/jQuery 응답 없음:
<select> <option value="" disabled selected>Select your option</option> <option value="hurr">Durr</option> </select>방금이 질문을 우연히 발견했으며 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' 스타일은 목록 상자를 '멋지게' 보이게 합니다.
참고: value 속성을 사용하면 유효성 검사(필수 속성)가 "자리 표시자"가 있는 문제를 해결할 수 있으므로 옵션이 변경되지 않았지만 필수인 경우 브라우저는 사용자에게 선택하라는 메시지를 표시해야 합니다. 목록에서 옵션을 선택합니다.
업데이트(2015년 7월):
이 방법은 다음 브라우저에서 작동하는 것으로 확인되었습니다.
업데이트(2015년 10월):
style="display: none" 을 제거하고 HTML5 속성을 hidden 으로써 폭넓게 지원합니다. hidden 요소는 표시와 유사한 특성을 가지고 display: none Safari, Internet Explorer의 없음(Project Spartan은 확인이 필요함) option 이 드롭다운에 표시되지만 선택할 수는 없습니다.
업데이트(2016년 1월):
select 요소가 required 경우 "placeholder" 상태에 있을 때 select :invalid CSS 의사 클래스를 사용할 수 있습니다. :invalid option 의 빈 값 때문에 여기에서 작동합니다.
값이 설정되면 :invalid 의사 클래스가 삭제됩니다. 원하는 경우 :valid 사용할 수도 있습니다.
대부분의 브라우저는 이 의사 클래스를 지원합니다. 인터넷 익스플로러 10 이상. 이것은 사용자 정의 스타일 select 요소에서 가장 잘 작동합니다. 어떤 경우에는(Chrome/Safari의 Mac) 특정 스타일이 표시되도록 select background-color 및 color . developer.mozilla.org 에서 호환성에 대한 몇 가지 예와 더 많은 정보를 찾을 수 있습니다.
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; }자바스크립트:
$("#choice").change(function () { if($(this).val() == "0") $(this).addClass("empty"); else $(this).removeClass("empty") }); $("#choice").change();방금 아래와 같은 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>나는 같은 문제가 있었고 검색하는 동안이 질문을 발견했으며 저에게 좋은 해결책을 찾은 후 누군가가 혜택을 볼 수 있도록 여러분과 공유하고 싶습니다.
여기있어:
<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> .place_holder { color: gray; } option { color: #000000; } jQuery(".dropdown").change(function () { jQuery(this).removeClass("place_holder"); }); 고객이 첫 번째 선택을 한 후에는 회색이 필요하지 않으므로 JavaScript 코드는 place_holder 클래스를 제거합니다.
@user1096901 덕분에 Internet Explorer 브라우저에 대한 해결 방법으로 첫 번째 옵션이 다시 선택되는 경우 place_holder
JavaScript나 CSS는 필요하지 않으며 다음 세 가지 속성만 있으면 됩니다.
<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 태그에 disabled 및 selected 속성을 넣었지만 숨겨진 태그도 넣으면 훨씬 좋아 보일 것입니다.
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>정답의 징후가 보이지만 모두 통합하려면 이것이 내 솔루션이 될 것입니다.
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>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>이것은 나를 위해 잘 작동합니다.
<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>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'); } });MattW의 답변 을 바탕으로 유효한 선택이 이루어진 후 자리 표시자가 선택된 상태로 유지되는 동안에만 조건부로 숨김으로써 선택 자리 표시자 옵션을 드롭다운 메뉴에 표시할 수 있습니다(따라서 선택은 유효하지 않음).
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>첫 번째 옵션의 색상을 gray 으로 설정하고 표시를 none 으로 설정하고 select 의 색상을 gray 설정하고 색상을 black 설정하는 input 이벤트 리스너를 추가할 수 있습니다.
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.outerHTML = `<select style='color:gray' oninput='style.color="black"'> <option style='display:none'> ${this.getAttribute('data-placeholder')} </option> ${this.innerHTML} </select>` Array.from(this.children).forEach(function(el, i) { if (i !== 0) { 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 없이도 잘 작동합니다.
나는 그것을 알아내는 데 몇 번의 시도가 필요했기 때문에 제어 선택 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 속성을 옵션 중 하나에 추가하는 것은 부적절하고 실제로 오류가 발생하므로 어떻게 해야 합니까?
답은 생각해보면 간단합니다. 첫 번째 option 을 selected 하고 disabled 및 hidden 을 원하기 때문에 세 가지 작업을 수행해야 합니다.
option hidden 및 disabled 속성을 추가합니다.option 의 값을 빈 문자열로 설정합니다.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() .
Bootstrap 에도 좋은 예가 있습니다.
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 }selected 는 페이지 로드 시 특정 옵션이 선택되도록 합니다.disabled 됨은 옵션이 양식 제출에서 제외되도록 합니다.hidden 은 드롭다운 목록에서 옵션을 시각적으로 숨깁니다. <select> <option selected disabled hidden>Choose an Option</option> <option>One</option> <option>Two</option> <option>Three</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>이 HTML 부분에 대해 선택될 때까지 SELECT를 회색으로 지정하고 싶었습니다.
<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(placeholder) )을 사용한 곳에서 정의한 placeholder 속성에서 텍스트를 가져옵니다. 또 다른 핵심 요소는 포인터 이벤트입니다. 없음 - 이를 통해 자리 표시자 텍스트를 클릭하면 선택 항목으로 전달됩니다. 그렇지 않으면 사용자가 텍스트를 클릭해도 드롭다운되지 않습니다.
내 선택 지시문에 .empty 클래스를 직접 추가하지만 일반적으로 angular는 .ng-empty 를 추가/제거한다는 것을 알았습니다(내 코드 샘플에 Angular의 버전 1.2를 주입하고 있기 때문이라고 가정합니다).
(샘플은 또한 AngularJS에서 HTML 요소를 래핑하여 사용자 정의 입력을 생성하는 방법을 보여줍니다)
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 전용 솔루션에 만족하지 않으므로 JavaScript 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"}, "▼", 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>업데이트 : 이것을 개선(위/아래/엔터 키를 사용한 선택)하고 출력을 약간 정리하고 이것을 객체로 만들었습니다. 전류 출력:
<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 (이름 변경).
업데이트: 나는 이것을 다시 작성했습니다. 목록을 사용하는 대신 선택을 사용할 수 있습니다. 이렇게 하면 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>이 답변을 참조하십시오.
<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>이 스레드에서 제공하는 답변 간의 다양한 스타일과 기능으로 인해 아래 표는 제공되는 HTML, HTML+CSS 및 HTML+CSS+Javascript 솔루션 각각에 대한 스타일 및 적용 가능한 폼 로직을 명확히 합니다.
어떤 이유로 표가 마크업에서 허용되지 않기 때문에 코드 서식을 사용해야 했습니다.
테이블 제한을 해결하기 위해 코드 조각을 사용하여 HTML 테이블이 제공됩니다.
이 게시물을 community wiki 로 표시하여 누구나 새 게시물에 대해 자세히 설명할 수 있습니다. 이 표를 단순하게 유지하려면 대체 게시물에 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를 사용하지 않고 HTML만 사용하여 이 작업을 수행할 수 있습니다. 기본 선택 옵션 disabled="" 및 selected="" 하고 tag 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>Angular 에서는 옵션 드롭다운에서 숨길 수 있는 자리 표시자로 옵션을 추가할 수 있습니다. 브라우저 드롭다운 아이콘 을 대체하는 사용자 정의 드롭다운 아이콘 을 배경으로 추가할 수도 있습니다.
트릭 은 값이 선택되지 않은 경우에만 자리 표시자 CSS를 활성화하는 것입니다.
/**내 구성 요소 템플릿*/
<div class="dropdown"> <select [ngClass]="{'placeholder': !myForm.value.myField}" class="form-control" formControlName="myField"> <option value="" hidden >Select a Gender</option> <option value="Male">Male</option> <option value="Female">Female</option> </select> </div>/**내 컴포넌트.TS */
constructor(fb: FormBuilder) { this.myForm = this.fb.build({ myField: '' }); }/**글로벌.scss*/
.dropdown { width: 100%; height: 30px; overflow: hidden; background: no-repeat white; background-image:url('angle-arrow-down.svg'); background-position: center right; select { background: transparent; padding: 3px; font-size: 1.2em; height: 30px; width: 100%; overflow: hidden; /*For moz*/ -moz-appearance: none; /* IE10 */ &::-ms-expand { display: none; } /*For chrome*/ -webkit-appearance:none; &.placeholder { opacity: 0.7; color: theme-color('mutedColor'); } option { color: black; } } }출처 : http:www.stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box
| C#에서 기본 생성자 호출 (0) | 2022.01.04 |
|---|---|
| Bash에서 파일 내용 반복 (0) | 2022.01.04 |
| HTML 및 CSS를 PDF에 추가하는 방법 [닫은] (0) | 2022.01.04 |
| JavaScript에서 JSON을 구문 분석하시겠습니까? [복제하다] (0) | 2022.01.04 |
| 내 모든 Git 은닉물을 한 번에 삭제하려면 어떻게 해야 합니까? (0) | 2022.01.04 |