선택 태그의 자리 표시 자
이 질문에 이미 답변이 있습니다.
선택 태그에 자리 표시자를 가질 수 있습니까?
<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>
에 따르면 모질라 개발자 네트워크 , placeholder
A의 유효한 속성이 아닙니다 <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-color
2 개 안전한 베팅하고, 다른 CSS 속성은 무시 될 가능성이 높다.
내 옵션에서 (HTML5에서) 기본 옵션을 표시하는 가장 좋은 방법은 사용자 정의 data-*
속성을 사용하는 것입니다. 1 회색으로 표시 할 기본 옵션의 스타일을 지정하는 방법은 다음과 같습니다.
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>
요소를 직접 타겟팅하세요 . 이 경우 현재 선택한 요소의 스타일 만 언제든지 변경할 수 있습니다. 2
사용자가 기본 항목을 선택하는 것을 약간 더 어렵게 만들고 싶다면에서 display: none;
CSS 규칙을 설정할 수 있습니다 <option>
.하지만 이것이 사용자가 선택하는 것을 막지 는 않는다는 점을 기억 하십시오 (예 : 화살표 키 / 타이핑 사용). 그렇게하기가 더 어렵습니다.
1 이 답변은 이전에 default
비표준이고 그 자체로는 의미가없는 속성 의 사용을 권장했습니다 .
2 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
'Programing' 카테고리의 다른 글
graphite의 Carbon aggregator가 동일한 작업을 수행 할 수 있는데 왜 statsd를 사용합니까? (0) | 2020.11.22 |
---|---|
AngularJS : REST 리소스에 매핑되는 객체 생성 (ORM 스타일) (0) | 2020.11.21 |
Eloquent 모델에서 메서드를 호출 할 때 '비 정적 메서드를 정적으로 호출해서는 안됩니다'라는 메시지가 나타나는 이유는 무엇입니까? (0) | 2020.11.21 |
ViewPager의 상위 Fragment가 숨겨져 표시되면 ViewPager의 Fragment의 뷰가 손실 됨 (0) | 2020.11.21 |
AngularJS의 라디오 버튼에 대해 ng-model이 작동하지 않습니다. (0) | 2020.11.21 |