Programing

Firefox에서 선택 요소에서 화살표를 제거하는 방법

lottogame 2020. 5. 24. 10:46
반응형

Firefox에서 선택 요소에서 화살표를 제거하는 방법

selectCSS3을 사용하여 요소의 스타일을 지정하려고합니다 . WebKit (Chrome / Safari)에서 원하는 결과를 얻었지만 Firefox가 제대로 재생되지 않습니다 (IE도 귀찮게하지 않습니다). CSS3 appearance속성을 사용하고 있지만 어떤 이유로 Firefox에서 드롭 다운 아이콘을 흔들 수 없습니다.

여기 내가하고있는 일의 예가 있습니다 : 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;
}

보시다시피, 나는 멋진 것을 시도하지 않습니다. 기본 스타일을 제거하고 드롭 다운 화살표를 추가하고 싶습니다. 내가 말했듯이, WebKit에서는 훌륭하지만 Firefox에서는 훌륭하지 않습니다. 분명히 -moz-appearance: none드롭 다운 항목을 제거하지 않습니다.

어떤 아이디어? 아니요, JavaScript는 옵션이 아닙니다

좋아, 나는이 질문이 오래되었다는 것을 알고있다. 그러나 2 년의 길 아래에서 mozilla는 아무것도하지 않았다.

간단한 해결 방법을 생각해 냈습니다.

이것은 본질적으로 파이어 폭스에서 선택 상자의 모든 형식을 제거하고 선택 상자 주위의 범위 요소를 사용자 정의 스타일로 래핑하지만 파이어 폭스에만 적용해야합니다.

이것이 선택 메뉴라고 가정하십시오. 

<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 요소를 추가하십시오. 

   <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-appearance : window로 mozilla의 더티 화살표를 숨기고 사용자 정의 화살표를 스팬 클래스 '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 (업데이트 후)로 테스트했습니다.

모든 의견을 환영합니다.

업데이트 : 이것은 Firefox v35에서 수정되었습니다. 자세한 내용은 전체 요점 을 참조하십시오.

Firefox에서 선택 화살표를 제거하는 방법을 알아 냈습니다 . 트릭의 혼합을 사용하는 것입니다 -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

나를 위해 작동하는 트릭은 선택 너비를 100 % 이상으로 만들고 overflow : hidden을 적용하는 것입니다.

select {
    overflow:hidden;
    width: 120%;
}

이것이 FF에서 드롭 다운 화살표를 숨기는 유일한 방법입니다.

BTW. 아름다운 드롭 다운을 원하면 http://harvesthq.github.com/chosen/

중요 업데이트 :

Firefox V35부터 모양 속성이 작동합니다!

에서 V35에 파이어 폭스의 공식 릴리스 노트 :

콤보 박스 -moz-appearance의 none값 과 함께 사용 하면 드롭 다운 버튼 (버그 649849)이 제거됩니다.

이제 기본 화살표를 숨기려면 select 요소에 다음 규칙을 추가하는 것이 쉽습니다.

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>

이 작업을 수행하는 간단하고 알맞은 방법을 찾았습니다. 브라우저 간, 분해 가능하며 양식 게시물을 손상시키지 않습니다. 첫째는 선택 상자의 설정 opacity에를 0.

.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의 innerHTML을 업데이트하십시오. jQuery로 Easypeasy :

$('.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;

… 어느 정도 작동합니다. 배경 (-컬러 또는-이미지)은 변경할 수 없지만 요소를 색상 : 투명으로 보이지 않게 렌더링 할 수 있습니다. 완벽하지는 않지만 시작이며 시스템 레벨 요소를 js로 바꿀 필요가 없습니다.

솔루션이 FF31과 호환되는 것으로 나타났습니다 !!!
다음은이 링크에서 잘 설명 된 두 가지 옵션입니다.
http://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/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 {디스플레이 : 없음; }

나는이 질문이 조금 오래되었다는 것을 알고 있지만, 그것은 구글에서 나타나기 때문에 "새로운"해결책이다 :

appearance: normalFirefox에서 제대로 작동하는 것 같습니다 (버전 5). 오페라와 IE8 / 9에는 없습니다

Opera와 IE9의 해결 방법으로 :beforepseudoselector를 사용하여 새 흰색 상자를 만들고 화살표 위에 놓습니다.

불행히도 IE8에서는 작동 하지 않습니다 . 상자가 올바르게 렌더링되지만 어쨌든 화살표가 튀어 나옵니다 ... :-/

사용 select:before은 Opera에서는 잘 작동하지만 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;
}

이 부분을 약간 조정해야 할 수도 있지만 이것은 저에게 효과적입니다!

면책 조항 : 양식을 사용하여 웹 페이지를 잘 보이게하기 위해 이것을 사용하고 있으므로 두 번째 페이지를 만들 필요가 없습니다. 나는 빨간 스크롤 막대, <marquee>태그 및 기타 를 원하지 않는 1337 haxx0r 가 아닙니다 :-) 이유 가 충분 하지 않으면 양식에 과도한 스타일을 적용 하지 마십시오 .

pointer-events속성을 사용하십시오 .

여기서 아이디어는 기본 드롭 다운 화살표 위에 요소를 오버레이하고 (사용자 정의 화살표를 작성하기 위해) 포인터 이벤트를 허용하지 않는 것입니다. [ 이 게시물 참조 ]

이 방법을 사용 하는 FIDDLE 이 작동 합니다.

또한 이 SO 답변 에서이 방법과 다른 방법에 대해 자세히 설명했습니다.

작동합니다 (Firefox 23.0.1에서 테스트).

select {
    -moz-appearance: radio-container;
}

@ JoãoCunha의 답변을 바탕으로 하나 이상의 브라우저에 유용한 하나의 CSS 스타일

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
    text-indent: 0.01px;
    text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
    display: none;
}

에 또한 조아 쿠냐의 대답 이 문제는 지금 모질라의 할일 목록에 및 버전 35을 대상으로한다.

원하는 사람들을 위해 Cunha의 블로그를 참조하여 Todd Parker가 오늘 작동하는 해결 방법이 있습니다.

http://jsfiddle.net/xvushd7x/

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

-moz-appearance:none이미 코드에 작성한 Firefox 35, " " 이후 로 원하는대로 화살표 버튼을 제거하십시오.

해당 버전 이후로 해결 된 버그 였습니다 .

많은 토론이 여기저기서 발생하지만이 문제에 대한 적절한 해결책을 찾지 못했습니다. 마지막으로 IE 및 Firefox 에서이 해킹을 수행하기 위해 작은 Jquery + CSS 코드를 작성하여 끝났습니다.

Jquery를 사용하여 요소 너비 (SELECT 요소)를 계산하십시오. 요소 선택 주위에 랩퍼를 추가하고이 요소에 대해 오버 플로우를 숨기십시오. 이 랩퍼의 너비가 appox인지 확인하십시오. SELECT 요소보다 25px 적습니다. 이것은 Jquery로 쉽게 수행 할 수 있습니다. 이제 아이콘이 사라졌습니다 ..! SELECT 요소에 이미지 아이콘을 추가 할 차례입니다 ... !!! 배경을 추가하기 위해 몇 줄의 간단한 줄을 추가하면 모두 완료됩니다 .. !! 외부 래퍼에 숨겨진 오버플로를 사용해야합니다.

다음은 Drupal을 위해 작성된 샘플 코드입니다. 그러나 Drupal Specific 인 몇 줄의 코드를 제거하여 다른 사람도 사용할 수 있습니다.

/*
 * 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, Chrome 및 Firefox에서 작동합니다. CSS를 사용하여 고정 너비 핵을 추가 할 필요가 없습니다. JQuery를 사용하여 모두 동적으로 처리됩니다!

http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css 에서 자세히 설명합니다.

이 CSS를보십시오

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
}

작동

appearanceCSS3 의 속성은 none값을 허용하지 않습니다 . 한 번 봐 가지고 는 W3C 참조 . 따라서 당신이하려는 것은 유효하지 않습니다 (실제로 크롬도 받아들이지 않아야합니다).

불행히도 우리는 순수한 CSS를 사용하여 화살표를 숨길 수있는 크로스 브라우저 솔루션이 없습니다. 지적했듯이 JavaScript가 필요합니다.

selectBox jQuery 플러그인 사용을 고려하는 것이 좋습니다 . 매우 가볍고 훌륭합니다.

상자 너비를 늘리고 화살표를 화살표 왼쪽에 더 가깝게 이동할 수 있습니다. 그러면 빈 흰색 div로 화살표를 덮을 수 있습니다.

보세요 : http://jsbin.com/aniyu4/86/edit

HTML을 약간만 변경 하시겠습니까?

select 태그를 포함하는 div 태그를 넣는 것과 같은 것.

구경하다.

또는 선택 물을자를 수 있습니다. 다음과 같은 내용이 있습니다.

select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }

그러면 선택 상자 오른쪽의 30px가 잘리고 화살표가 사라집니다. 이제 170px 배경 이미지와 스타일 선택을 제공하십시오

큰 해킹이지만 -moz-appearance: menulist-text트릭을 수행 할 수 있습니다.

나는 같은 문제를 겪고 있었다. FF 및 Chrome에서 작동하기는 쉽지만 IE (8 + 이상 지원해야 함)에서는 복잡합니다. IE8을 포함하여 "내가 시도한 모든 곳에서 작동하는 사용자 지정 선택 요소에 대해 찾을 수있는 가장 쉬운 솔루션은 .customSelect ()를 사용하는 것입니다.

나에게 유용한 해킹은 (선택) 디스플레이를로 설정하는 것 inline-flex입니다. 선택 버튼에서 바로 화살표를 잘라냅니다. 추가 된 코드가 모두 없습니다.

  • Fx 전용. -webkit appearanceChrome 등에 여전히 필요합니다 ...

Jordan Young의 답변이 최고입니다. 그러나 HTML을 변경할 수 없거나 변경하고 싶지 않은 경우 Chrome, Safari 등에 제공되는 사용자 정의 아래쪽 화살표를 제거하고 firefox의 기본 화살표를 그대로 두는 것이 좋습니다. 그러나 이중 화살표는 나타나지 않습니다. 이상적이지는 않지만 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;
  }
}

hackity hack ... 테스트 한 모든 브라우저 (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-element를 사용하고 있습니다. select가 : after를 지원하지 않기 때문에 작업 할 래퍼가 필요합니다. 이제 화살표를 클릭하면 드롭 다운이 등록되지 않습니다 ... 브라우저를 지원하지 않으면 pointer-events: noneIE10-을 제외한 모든 사람이 지원합니다 : http://caniuse.com/#feat=pointer-events

그래서 나를 위해 그것은 완벽합니다-적어도 javascript를 포함하는 다른 모든 옵션과 비교할 때 멋지고 깨끗하고 두통이 적은 솔루션입니다.

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

바이올린 여기 : JS 바이올린

조건은 선택에서 처음부터 스타일을 지정해야하며 (배경과 테두리 설정을 의미 함) 어쨌든이 작업을 수행하려고합니다.

또한이 기능은 원래 선택을 div로 대체하므로 CSS의 선택 선택기에서 직접 수행 된 스타일은 손실됩니다. 따라서 select 요소에 클래스를 제공하고 클래스를 스타일 지정하십시오.

대부분의 최신 브라우저를 지원합니다. 이전 브라우저를 대상으로하려면 이전 버전의 jQuery를 사용해 볼 수 있지만 함수에서 on ()을 bind ()로 바꿔야 할 수도 있습니다 (테스트되지 않음)

다른 답변은 저에게 효과가없는 것 같지만이 해킹을 찾았습니다. 이것은 나를 위해 일했다 (2014 년 7 월)

select {
-moz-appearance: textfield !important;
    }

제 경우에는 woocommerce 입력 필드도 있었으므로 이것을 사용했습니다. 

.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' 카테고리의 다른 글

JavaScript에서 불변성이 중요한 이유는 무엇입니까?  (0) 2020.05.24
Spring MVC와 Spring Boot의 차이점  (0) 2020.05.24
글꼴 크기 macvim을 변경 하시겠습니까?  (0) 2020.05.24
단위 테스트 내부에서 코드가 번들 자원을 찾을 수없는 이유는 무엇입니까?  (0) 2020.05.24
JSX (React Variable Statements)로 HTML 삽입  (0) 2020.05.24

'Programing'의 다른글

  • 현재글Firefox에서 선택 요소에서 화살표를 제거하는 방법

관련글

댓글

티스토리툴바