Firefox의 선택 요소에서 화살표를 제거하는 방법
저는 스타일을 하려고 합니다.selectCSS3를 사용하는 요소.웹 키트(크롬/사파리)에서 원하는 결과를 얻고 있지만 Firefox가 제대로 작동하지 않습니다(IE도 신경 쓰지 않습니다).저는 CSS3를 사용하고 있습니다.appearance파이어폭스에서 드롭다운 아이콘을 지울 수 없습니다.
여기 제가 하고 있는 일의 예가 있습니다. http://jsbin.com/aniyu4/2/edit
#dropdown {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: transparent url('example.png') no-repeat right center;
padding: 2px 30px 2px 2px;
border: none;
}
보시다시피, 저는 화려한 것을 추구하는 것이 아닙니다.기본 스타일을 제거하고 내 드롭다운 화살표를 추가합니다.제가 말했듯이, 웹킷에서는 훌륭하지만 파이어폭스에서는 훌륭하지 않습니다. 아하니그, 보그▁apparent.-moz-appearance: none드롭다운 항목을 제거하지 않습니다.
아이디어 있어요?아니요, JavaScript는 옵션이 아닙니다.
업데이트:파이어폭스 v35에서 수정되었습니다.자세한 내용은 전체 개요를 참조하십시오.
파이어폭스에서 선택 화살표를 제거하는 방법을 방금 알아냈습니다.요령은 다음을 혼합하여 사용하는 것입니다.-prefix-appearance,text-indent그리고.text-overflow이것은 순수한 CSS이며 추가 마크업이 필요하지 않습니다.
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
최신 버전의 Firefox인 Windows 8, Ubuntu 및 Mac에서 테스트되었습니다.
실시간 예: http://jsfiddle.net/joaocunha/RUEbp/1/
더 많은 주제: https://gist.github.com/joaocunha/6273016
좋아요, 이 질문이 오래된 것은 알지만, 2년 후 모질라는 아무것도 하지 않았습니다.
간단한 해결책을 생각해 냈습니다.
이렇게 하면 기본적으로 파이어폭스에서 선택 상자의 모든 형식이 제거되고 사용자 지정 스타일로 선택 상자 주위에 스팬 요소가 감겨지지만 파이어폭스에만 적용됩니다.
선택한 메뉴라고 합니다.
<select class='css-select'>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>
그리고 css 클래스 'css-select'를 다음과 같이 가정합니다.
.css-select {
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
파이어폭스에서는 선택 메뉴와 함께 표시되고, 못생긴 파이어폭스 선택 화살표와 함께 사용자 지정 보기 좋은 화살표가 표시됩니다.이상적이지 않습니다.
이제 파이어폭스에서 이 문제를 해결하려면 클래스 'css-select-moz'와 함께 스팬 요소를 추가합니다.
<span class='css-select-moz'>
<select class='css-select'>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>
</span>
그런 다음 CSS를 수정하여 -moz-aperance:window로 Mozilla의 더티 화살표를 숨기고 사용자 지정 화살표를 Span의 클래스 'css-select-moz'에 던지지만 다음과 같이 Mozilla에만 표시되도록 합니다.
.css-select {
-moz-appearance:window;
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
@-moz-document url-prefix() {
.css-select-moz{
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
}
3시간 전에 이 버그를 우연히 발견한 것만으로도 꽤 멋집니다(저는 웹 디자인에 익숙하지 않고 완전히 독학했습니다).하지만, 이 공동체는 간접적으로 저에게 많은 도움을 주었고, 저는 제가 무언가를 돌려줄 때라고 생각했습니다.
파이어폭스(mac) 버전 18과 22(업데이트 후)에서만 테스트했습니다.
모든 피드백을 환영합니다.
나에게 효과적인 트릭은 선택 폭을 100% 이상으로 만들고 오버플로를 적용하는 것입니다: 숨김
select {
overflow:hidden;
width: 120%;
}
FF에서 드롭다운 화살표를 숨길 수 있는 유일한 방법입니다.
그나저나, 아름다운 드롭다운을 원한다면 http://harvesthq.github.com/chosen/ 을 사용하세요.
중요 업데이트:
Firefox V35부터 모양 속성이 작동합니다!!
용사를 합니다.
-moz-appearancenone이제 콤보 상자의 값이 드롭다운 버튼을 제거합니다(버그 649849).
이제 기본 화살표를 숨기려면 선택 요소에 다음 규칙을 추가하는 것만큼 쉽습니다.
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select {
margin: 50px;
border: 1px solid #111;
background: transparent;
width: 150px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>우리는 이것을 할 수 있는 간단하고 괜찮은 방법을 찾았습니다.이것은 크로스 브라우저이며 분해 가능하며 양식 게시물을 파손하지 않습니다.먼저 선택 상자의 값을 설정합니다.opacity0.
.select {
opacity : 0;
width: 200px;
height: 15px;
}
<select class='select'>
<option value='foo'>bar</option>
</select>
이것은 당신이 여전히 그것을 클릭할 수 있도록 하기 위한 것입니다.
그런 다음 선택 상자와 동일한 차원의 div를 만듭니다.div는 선택 상자 아래에 배경으로 놓여야 합니다. 사용{ position: absolute }그리고.z-index.
.div {
width: 200px;
height: 15px;
position: absolute;
z-index: 0;
}
<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
<option value='foo'>bar</option>
</select>
div의 내부 업데이트Javascript가 있는 HTML입니다.jQuery를 통한 간편한 사용:
$('.select').click(function(event)) {
$('.div').html($('.select option:selected').val());
}
바로 그거야!선택 상자 대신 div 스타일만 지정하면 됩니다.위 코드를 테스트하지 않았으니 수정이 필요할 것 같습니다.하지만 당신이 요점을 이해하기를 바랍니다.
이 솔루션이 더 나은 것 같습니다.{-webkit-appearance: none;}브라우저가 가장 많이 해야 할 일은 양식 요소와의 상호 작용을 지시하는 것이지만, 사이트 설계를 위반하기 때문에 페이지에 처음 표시되는 방식은 분명히 아닙니다.
다음 방법을 사용해 보십시오.
-webkit-appearance: button;
-moz-appearance: button;
그런 다음 다른 이미지를 배경으로 사용하여 배치할 수 있습니다.
background-image: url(images/select-arrow.png);
background-position: center right;
background-repeat: no-repeat;
Moz 브라우저에는 다른 방법이 있습니다.
text-indent:10px;
선택할 너비를 정의한 경우 이 속성은 선택 영역 아래의 기본 드롭박스 단추를 누릅니다.
저한테 효과가 있어요! ;)
완벽한 솔루션은 아니지만, 다음과 같은 것을 발견했습니다.
-moz-appearance: window;
…어느 정도 효과가 있습니다.배경(-color 또는 -image)은 변경할 수 없지만 요소는 투명한 색상으로 보이지 않게 만들 수 있습니다.완벽하지는 않지만 시스템 수준 요소를 jsone으로 바꿀 필요는 없습니다.
FF31과 호환되는 솔루션을 찾은 것 같습니다!!!
다음은 이 링크에서 잘 설명된 두 가지 옵션입니다.
http://www.currelis.com/.htmlhttp ://www.currelis.com/hiding-select-arrow-firefox-30.html
저는 옵션 1을 사용했습니다: Rodrigo-Ludgero는 온라인 데모를 포함하여 이 수정 사항을 Github에 게시했습니다.Firefox 31.0에서 이 데모를 테스트해보니 제대로 작동하는 것 같습니다.Chrome 및 IE에서도 테스트되었습니다.html 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Select</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="custom-select fa-caret-down">
<select name="" id="">
<option value="">Custom Select</option>
<option value="">Custom Select</option>
<option value="">Custom Select</option>
</select>
</div>
</body>
</html>
그리고 css:
.custom-select {
background-color: #fff;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 0 2em;
padding: 0;
position: relative;
width: 100%;
z-index: 1;
}
.custom-select:hover {
border-color: #999;
}
.custom-select:before {
color: #333;
display: block;
font-family: 'FontAwesome';
font-size: 1em;
height: 100%;
line-height: 2.5em;
padding: 0 0.625em;
position: absolute;
top: 0;
right: 0;
text-align: center;
width: 1em;
z-index: -1;
}
.custom-select select {
background-color: transparent;
border: 0 none;
box-shadow: none;
color: #333;
display: block;
font-size: 100%;
line-height: normal;
margin: 0;
padding: .5em;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.custom-select select::-ms-expand {
display: none; /* to ie 10 */
}
.custom-select select:focus {
outline: none;
}
/* little trick for custom select elements in mozilla firefox 17/06/2014 @rodrigoludgero */
:-moz-any(.custom-select):before {
background-color: #fff; /* this is necessary for overcome the caret default browser */
pointer-events: none;
z-index: 1; /* this is necessary for overcome the pseudo element */
}
http://jsbin.com/pozomu/4/://jsbin.com/pozomu/4/edit
그것은 나에게 매우 잘 작동합니다!
불행하게도 이것은 "멋진 것"입니다.일반적으로 웹 작성자가 양식 요소를 재설계할 수 있는 위치는 아닙니다.대부분의 브라우저는 사용자가 익숙한 OS 컨트롤을 볼 수 있도록 일부러 스타일을 지정하지 않습니다.
체제를 를 일관되게 할 수 하고 JavaScript를 입니다.select요소와 "DHTML" 요소.
다음 기사에서는 이를 가능하게 하는 3개의 jQuery 기반 플러그인을 보여 줍니다(약간 오래되었지만 현재는 찾을 수 없음).
http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1
/* Try this in FF30+ Covers up the arrow, turns off the background */
/* still lets you style the border around the image and allows selection on the arrow */
@-moz-document url-prefix() {
.yourClass select {
text-overflow: '';
text-indent: -1px;
-moz-appearance: none;
background: none;
}
/*fix for popup in FF30 */
.yourClass:after {
position: absolute;
margin-left: -27px;
height: 22px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
content: url('../images/yourArrow.svg');
pointer-events: none;
overflow: hidden;
border-right: 1px solid #yourBorderColour;
border-top: 1px solid #yourBorderColour;
border-bottom: 1px solid #yourBorderColour;
}
}
나는 셀렉트를 이렇게 스타일링하고 있습니다.
<select style=" -moz-appearance: radio-container;
-webkit-appearance: none;
appearance: none;
">
제가 테스트한 모든 버전에서 FF, Safari 및 Chrome에서 작동합니다.
IE에 입력한 내용:
select::-ms-expand {
display: none;
}
/*to remove in all selects*/
또한 .yourclass:: -ms-expand {display: none; } .yourid:: -ms-exapan {display: none; }도 가능합니다.
이 css를 사용해 보세요.
select {
/*for firefox*/
-moz-appearance: none;
/*for chrome*/
-webkit-appearance:none;
}
효과가 있습니다
이 질문이 좀 오래된 것이라는 것은 알지만, 구글에서 발견되기 때문에, 이것은 "새로운" 해결책입니다.
appearance: normal파이어폭스에서 잘 작동하는 것 같습니다(현재 버전 5).하지만 오페라와 IE8/9에서는 그렇지 않습니다.
에 IE9 대한로방사다습다니용했음을및을 했습니다.:before유사 선택기를 사용하여 새 흰색 상자를 만들고 화살표 위에 놓습니다.
안타깝게도 IE8에서는 이것이 작동하지 않습니다.상자는 올바르게 렌더링되었지만 화살표는 그냥 튀어나옵니다... :-/
용사를 합니다.select:before오페라에서는 잘 작동하지만 IE에서는 잘 작동하지 않습니다.개발자 도구를 보면 규칙을 올바르게 읽은 다음 무시합니다(삭제됨).그래서 저는<span class="selectwrap"> 실제주에의 에.<select>.
select {
-webkit-appearance: normal;
-moz-appearance: normal;
appearance: normal;
}
.selectwrap { position: relative; }
.selectwrap:before {
content: "";
height: 0;
width: 0;
border: .9em solid red;
background-color: red;
position: absolute;
right: -.1em;
z-index: 42;
}
이것을 조금 수정해야 할 수도 있지만, 이것은 저에게 효과가 있습니다!
고지 사항:두 번째 페이지를 만들 필요가 없도록 양식이 포함된 보기 좋은 웹 페이지 복사본을 가져오는 데 사용합니다.난 빨간 스크롤바를 원하는 1337 haxx0r이 아닙니다.<marquee>태그 및 기타 :-) 매우 정당한 이유가 없는 한 양식에 과도한 스타일링을 적용하지 마십시오.
을 합니다.pointer-events소유물.
여기서는 기본 드롭다운 화살표 위에 요소를 겹쳐 사용자 지정 요소를 만든 다음 해당 요소에 대한 포인터 이벤트를 허용하지 않습니다.[이 게시물 참조]
다음은 이 방법을 사용하여 작동하는 FIDDLE입니다.
또한 이 SO 답변에서 저는 이것과 다른 방법에 대해 더 자세히 논의했습니다.
이것은 작동합니다(Firefox 23.0.1에서 테스트됨).
select {
-moz-appearance: radio-container;
}
하나 이상의 브라우저에서 사용할 수 있는 하나의 CSS 스타일인 @Joang Cunha의 답변을 기반으로 합니다.
select {
/*for firefox*/
-moz-appearance: none;
/*for chrome*/
-webkit-appearance:none;
text-indent: 0.01px;
text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
display: none;
}
Joao Cunha의 답변과 더불어 이 문제는 현재 Mozilla의 ToDo 목록에 있으며 ver 35를 대상으로 합니다.
다음은 Cunha의 블로그에서 언급된 Todd Parker의 해결책으로, 오늘날 작동합니다.
HTML:
<label class="wrapper">This label wraps the select
<div class="button custom-select ff-hack">
<select>
<option>Apples</option>
<option>Bananas</option>
<option>Grapes</option>
<option>Oranges</option>
<option>A very long option name to test wrapping</option>
</select>
</div>
</label>
CSS:
/* Label styles: style as needed */
label {
display:block;
margin-top:2em;
font-size: 0.9em;
color:#777;
}
/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {
position: relative;
display:block;
margin-top:0.5em;
padding:0;
}
/* These are the "theme" styles for our button applied via separate button class, style as you like */
.button {
border: 1px solid #bbb;
border-radius: .3em;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
background: #f3f3f3; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}
/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {
width:100%;
margin:0;
background:none;
border: 1px solid transparent;
outline: none;
/* Prefixed box-sizing rules necessary for older browsers */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Remove select styling */
appearance: none;
-webkit-appearance: none;
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
font-size:16px;
/* General select styles: change as needed */
font-family: helvetica, sans-serif;
font-weight: bold;
color: #444;
padding: .6em 1.9em .5em .8em;
line-height:1.3;
}
/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */
.custom-select::after {
content: "";
position: absolute;
width: 9px;
height: 8px;
top: 50%;
right: 1em;
margin-top:-4px;
background-image: url(http://filamentgroup.com/files/select-arrow.png);
background-repeat: no-repeat;
background-size: 100%;
z-index: 2;
/* These hacks make the select behind the arrow clickable in some browsers */
pointer-events:none;
}
/* Hover style */
.custom-select:hover {
border:1px solid #888;
}
/* Focus style */
.custom-select select:focus {
outline:none;
box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
background-color:transparent;
color: #222;
border:1px solid #aaa;
}
/* Set options to normal weight */
.custom-select option {
font-weight:normal;
}
파이어폭스 35 이후,"-moz-appearance:none원하는 대로 화살표 단추를 제거합니다.
그것은 그 버전 이후로 해결된 버그였습니다.
여기저기서 많은 토론이 벌어지고 있지만 저는 이 문제에 대한 적절한 해결책을 찾지 못하고 있습니다.결국 IE & Firefox에서 이 HACK을 수행하기 위한 작은 Jquery + CSS 코드를 작성하는 것으로 끝이 났습니다.
Jquery를 사용하여 요소 너비(SELECT 요소)를 계산합니다.주변에 래퍼 추가 요소를 선택하고 이 요소에 대해 오버플로를 숨깁니다.이 포장지의 너비가 SELECT Element의 너비보다 25px 작아야 합니다.이것은 Jquery로 쉽게 할 수 있습니다.이제 아이콘이 사라졌습니다...! 이제 SELECT 요소에 이미지 아이콘을 추가할 시간입니다...!!배경을 추가하기 위한 간단한 선을 몇 개 추가하기만 하면 모두 완료됩니다.외부 포장지에는 오버플로를 숨겨 사용해야 합니다.
여기 Drupal을 위해 작성된 코드 샘플이 있습니다.그러나 Drupal 고유의 코드 몇 줄을 제거함으로써 다른 사람들에게도 사용될 수 있습니다.
/*
* Jquery Code for Removing Dropdown Arrow.
* @by: North Web Studio
*/
(function($) {
Drupal.behaviors.nwsJS = {
attach: function(context, settings) {
$('.form-select').once('nws-arrow', function() {
$wrap_width = $(this).outerWidth();
$element_width = $wrap_width + 20;
$(this).css('width', $element_width);
$(this).wrap('<div class="nws-select"></div>');
$(this).parent('.nws-select').css('width', $wrap_width);
});
}
};
})(jQuery);
/*
* CSS Code for Removing Dropdown Arrow.
* @by: North Web Studio
*/
.nws-select {
border: 1px solid #ccc;
overflow: hidden;
background: url('../images/icon.png') no-repeat 95% 50%;
}
.nws-select .form-select {
border: none;
background: transparent;
}
솔루션은 모든 브라우저 IE, 크롬 및 파이어폭스에서 작동합니다. CSS를 사용하여 고정 폭 해킹을 추가할 필요가 없습니다.모두 JQuery.!를 사용하여 동적으로 처리됩니다.
자세한 내용은 다음 웹 사이트: - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css
그appearance은 CSS3를 허용하지 .nonevalue. W3C 참조를 확인합니다.따라서 사용자가 하려는 작업은 유효하지 않습니다(크롬도 허용해서는 안 됩니다).
그러면 안타깝게도 순수 CSS를 사용하여 화살표를 숨길 수 있는 크로스 브라우저 솔루션이 없습니다.지적했듯이, 당신은 자바스크립트가 필요할 것입니다.
selectBox jQuery 플러그인 사용을 고려해 보는 것이 좋습니다.아주 가볍고 잘 만들어졌어요.
상자의 너비를 늘리고 화살표를 왼쪽으로 더 가까이 이동할 수 있습니다.그러면 빈 흰색 디브로 화살표를 덮을 수 있습니다.
확인: http://jsbin.com/aniyu4/86/edit
html에 대한 사소한 변경사항을 수락하시겠습니까?
선택한 태그가 포함된 div 태그를 넣는 것과 같은 것입니다.
또는 선택 항목을 클리핑할 수 있습니다.다음과 같은 것:
select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }
이렇게 하면 선택 상자의 오른쪽에서 30px를 클립하여 화살표를 벗겨낼 수 있습니다.이제 170px 배경 이미지와 voila 스타일의 선택을 제공합니다.
해킹이지만,-moz-appearance: menulist-text그럴지도 몰라요
저도 같은 문제를 겪고 있었습니다.FF와 Chrome에서는 쉽게 작동하지만 IE(지원해야 하는 8+)에서는 상황이 복잡해집니다.IE8을 포함하여 "어디서나" 작동하는 사용자 지정 선택 요소에 대해 찾을 수 있는 가장 쉬운 솔루션은 .custom을 사용하는 것입니다.선택()
저에게 유용한 해킹은 (선택) 디스플레이를 다음과 같이 설정하는 것입니다.inline-flex선택 단추에서 바로 화살표를 잘라냅니다.추가된 코드를 모두 제외하고 있습니다.
- Fx에 한해요.
-webkit appearanceChrome 등에 여전히 필요합니다.
Jordan Young의 대답은 최고입니다.그러나 HTML을 변경할 수 없거나 변경하지 않으려면 Chrome, Safari 등에 제공되는 사용자 지정 아래쪽 화살표를 제거하고 파이어폭스의 기본 화살표를 그대로 두는 것을 고려할 수 있지만 이중 화살표는 사용하지 않습니다.이상적이지는 않지만 HTML을 추가하지 않고 다른 브라우저에서 사용자 정의 모양을 손상시키지 않는 좋은 빠른 수정입니다.
<select>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>
CSS:
select {
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
@-moz-document url-prefix() {
select {
background-image: none;
}
}
해킹... 제가 테스트한 모든 브라우저(Safari, Firefox, Chrome)에서 작동하는 솔루션입니다.주변에 IE가 존재하지 않도록 테스트하고 의견을 제시해 주시면 감사하겠습니다.
<div class="wrapper">
<select>
<option>123456789</option>
<option>234567890</option>
</select>
</div>
URL 인코딩 이미지가 있는 CSS:
.wrapper { position:relative; width:200px; }
.wrapper:after {
content:"";
display: block;
position: absolute;
top:1px; height:28px;
right:1px; width:16px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAcCAYAAACH81QkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODExOEE2RENENTU2MTFGMEQ1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDE5NDQ3Nzc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDE5NDQ3Njc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDg4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4o7anbAAAAjklEQVR42uzUsQ3EIAwFUPty7MBOsAoVC7EVYgyUSFcdzn0iJYquAZGSLxnLzatsWERWGsvGP0QGkc+LxvN9AqGJTKQJMcYQM/+VtbZdiTGKUgr3cxbmlJI0ZiW83vsbgrkjB5JzFq11BdAxdyNICKEi6J25kFKKOOdq70We+JS2ufYTacjyxrKMLtsuwAAznzqGLHX9BwAAAABJRU5ErkJggg==);
pointer-events: none;
}
select {
width: 100%;
padding:3px;
margin: 0;
border-radius: 0;
border:1px solid black;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
float:none!important;
background:white;
font-size:13px;
line-height: 1em;
height: 30px;
padding:6px 20px 6px 10px;
}
http://codepen.io/anon/pen/myPEBy
저는 못생긴 화살표를 가리기 위해 :after 요소를 사용하고 있습니다.select가 지원하지 않기 때문에:after, 나는 함께 일할 포장지가 필요합니다.이제 화살표를 클릭하면 드롭다운이 등록되지 않습니다...에서 지원하지 한pointer-events: noneIE10을 제외한 모든 사용자가 수행하는 작업: http://caniuse.com/ #module=module-module
그래서 저에게 그것은 완벽합니다. 적어도 자바스크립트를 포함한 다른 모든 옵션과 비교해 볼 때, 멋지고 깨끗하고 낮은 두통 해결책입니다.
tl;dr:
IE10(또는 그 이하) 사용자가 화살표를 클릭하면 작동하지 않습니다.저한테는 충분히 효과가 있어요
당신이 JS를 만지작거려도 괜찮다면, 당신이 할 수 있도록 작은 jQuery 플러그인을 작성했습니다.따라서 공급업체 접두사에 대해 걱정할 필요가 없습니다.
$.fn.magicSelectBox = function() {
var $e = this;
$e.each(function() {
var $select = $(this);
var $magicbox = $('<div></div>').attr('class', $select.attr('class')).attr('style', $select.attr('style')).addClass('magicbox');
var $innermagicbox = $('<div></div>').css({
position: 'relative',
height: '100%'
});
var $text = $('<span></span>').css({
position: 'absolute'
}).text($select.find("option:selected").text());
$select.attr('class', null).css({
width: '100%',
height: '100%',
opacity: 0,
position: 'absolute'
}).on('change', function() {
$text.text($select.find("option:selected").text());
});
$select.parent().append($magicbox);
$innermagicbox.append($text, $select);
$magicbox.append($innermagicbox);
});
return $e;
};
Fiddle here: JS Fiddle
조건은 선택 항목을 처음부터 스타일을 지정해야 한다는 것입니다(이것은 배경과 테두리를 설정하는 것을 의미합니다). 하지만 어쨌든 이 작업을 수행할 수 있습니다.
또한 이 함수는 원래 셀렉트를 디브로 대체하기 때문에 CSS에서 셀렉트 셀렉터에서 직접 수행한 스타일링을 잃게 됩니다.선택한 요소에 클래스를 지정하고 클래스 스타일을 지정합니다.
대부분의 최신 브라우저를 지원합니다. 이전 버전의 브라우저를 대상으로 하려면 이전 버전의 jQuery를 사용할 수 있지만, 기능에서 on()을 bind()로 대체해야 합니다(테스트되지 않음).
다른 답들은 저에게 효과가 없는 것처럼 보였지만, 저는 이 해킹을 발견했습니다.이것은 저에게 효과가 있었습니다(2014년 7월).
select {
-moz-appearance: textfield !important;
}
저 같은 경우에는 우커머스 입력란도 있어서 이걸 사용했습니다.
.woocommerce .quantity input.qty {
-moz-appearance: textfield !important;
}
입력이 아닌 선택을 표시하도록 답변을 업데이트했습니다.
언급URL : https://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-element-in-firefox
'programing' 카테고리의 다른 글
| ASP.NET MVC & 웹 서비스 (0) | 2023.08.28 |
|---|---|
| Postgres와 MariaDb 사이의 다른 동작을 최적으로 잠그는 최대 절전 모드 (0) | 2023.08.28 |
| Android:백스택 지우기 (0) | 2023.08.28 |
| SQL 결과에 mariaDB 테이블의 한글 필드가 표시되지 않음 (0) | 2023.08.28 |
| Node.js 장치 테스트 (0) | 2023.08.28 |