드롭다운 목록(요소 선택)에서 기본 화살표 아이콘을 제거하는 방법은 무엇입니까?
HTML에서 드롭다운 화살표를 제거합니다.<select>
원소의예:
<select style="width:30px;-webkit-appearance: none;">
<option>2000</option>
<option>2001</option>
<option>2002</option>
...
</select>
오페라, 파이어폭스, 인터넷 익스플로러에서 어떻게 합니까?
해킹이나 오버플로가 필요 없습니다.IE의 드롭다운 화살표에 대한 유사 요소가 있습니다.
select::-ms-expand {
display: none;
}
앞서 언급한 솔루션은 크롬에서는 잘 작동하지만 파이어폭스에서는 작동하지 않습니다.
(IE가 아닌) Chrome과 Firefox 모두에서 잘 작동하는 솔루션을 찾았습니다.다음 속성을 SELECT 요소의 CSS에 추가하고 필요에 따라 마진 상단을 조정합니다.
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
<select>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
선택에서 드롭다운 화살표를 제거하는 간단한 방법
select {
/* for Firefox */
-moz-appearance: none;
/* for Chrome */
-webkit-appearance: none;
}
/* For IE10 */
select::-ms-expand {
display: none;
}
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
사용해 보십시오.
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 2px 30px 2px 2px;
border: none;
}
JS Bin : http://jsbin.com/aniyu4/2/edit
Internet Explorer를 사용하는 경우:
select {
overflow:hidden;
width: 120%;
}
또는 Chosen: http://harvesthq.github.io/chosen/ 을 사용할 수 있습니다.
사용:
HTML:
<div class="customselect">
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</div>
CSS:
.customselect {
width: 70px;
overflow: hidden;
}
.customselect select {
width: 100px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
나한테 효과가 있어요
<style>
select{
border: 0 !important; /*Removes border*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-overflow:'';
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/
}
select::-ms-expand {
display: none;
}
.select-wrapper
{
padding-left:0px;
overflow:hidden;
}
</style>
<div class="select-wrapper">
<select> ... </select>
</div>
숨길 수는 없지만 숨겨진 오버플로를 사용하면 실제로 삭제할 수 있습니다.
제 경우(최신 Mozilla 버전 94.0.2),
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
작동하지 않지만 CSS를 확인한 후 해결책을 찾았습니다.
- 화살표가 포함되어 있습니다.
background-image
그래서 그냥 추가해서 해결했습니다.background-image: none;
모든 규칙 사용을 권장합니다.
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-image: none;
}
그냥 스레드를 완성하고 싶었어요.매우 명확하게 말하자면, 이것은 IE9에서 작동하지 않지만, 우리는 약간의 css 트릭으로 할 수 있습니다.
<div class="customselect">
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</div>
.customselect {
width: 80px;
overflow: hidden;
border:1px solid;
}
.customselect select {
width: 100px;
border:none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
TailwindCSS를 사용하는 경우 다음을 활용할 수 있습니다.appearance-none
학급.
<select class="appearance-none">
<option>Yes</option>
<option>No</option>
<option>Maybe</option>
</select>
클래스 및 유사 클래스를 사용하려는 경우:
.simple-control
당신의 css 수업입니다.
:disabled
유사 클래스입니다.
select.simple-control:disabled{
/*For FireFox*/
-webkit-appearance: none;
/*For Chrome*/
-moz-appearance: none;
}
/*For IE10+*/
select:disabled.simple-control::-ms-expand {
display: none;
}
select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;
}
완전한 기능을 갖춘 브라우저 간 지원으로는 이 작업을 수행할 수 없습니다.
50픽셀의 div를 사용해보고 원하는 드롭다운 아이콘을 오른쪽에 띄웁니다.
이제 그 div 안에 55픽셀의 너비를 가진 선택 태그를 추가합니다(용기 너비 이상).
당신이 원하는 것을 얻을 수 있을 거라고 생각합니다.
오른쪽에 드롭 아이콘을 표시하지 않으려면 오른쪽에 이미지를 띄우는 것을 제외하고 모든 단계를 수행합니다.선택 태그에 대해 아웃라인:0을 포커스에 설정합니다.바로 그겁니다.
DropKick.js라는 라이브러리는 일반 선택 드롭다운을 HTML/CSS로 대체하여 자바스크립트로 완전히 스타일을 지정하고 제어할 수 있습니다.http://dropkickjs.com/
모든 브라우저 및 모든 버전에서 작동합니다.
제이에스
jQuery(document).ready(function () {
var widthOfSelect = $("#first").width();
widthOfSelect = widthOfSelect - 13;
//alert(widthOfSelect);
jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});
HTML
<select class="first" id="first">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
선택 html 태그에서 캐럿 아이콘을 숨기는 간단하고 쉬운 한 가지 방법은 없음과 없음으로 값을 CSS로 추가하는 것입니다.
select.without-icon {appearance:none;background-image:url('');}
<label>with Icon</label>
<select class="with-icon">
<option value="select" selected>Select</option>
<option value="Html Css">HTML CSS </option>
<option value="web development">Web Development</option>
<option value="Front End">Front End</option>
<option value="Programming">Programming</option>
</select>
<label>Without Icon</label>
<select class="without-icon">
<option value="select" selected>Select</option>
<option value="Html Css">HTML CSS </option>
<option value="web development">Web Development</option>
<option value="Front End">Front End</option>
<option value="Programming">Programming</option>
</select>
바로 이와 같이:
background-image:url('');
언급URL : https://stackoverflow.com/questions/16603979/how-to-remove-the-default-arrow-icon-from-a-dropdown-list-select-element
'programing' 카테고리의 다른 글
MariaDB가 소켓을 통해 연결할 수 없음 (0) | 2023.08.01 |
---|---|
app.all('*')과 app.use('/')의 차이 (0) | 2023.08.01 |
너비가 있는 CSS 입력: 100%가 상위 경계를 벗어납니다. (0) | 2023.08.01 |
코드백에서 자바스크립트 함수를 호출하는 방법 (0) | 2023.08.01 |
Oracle ORA-04068의 빈번한 오류: 기존 패키지 상태가 삭제되었습니다. (0) | 2023.07.27 |