2

Firefox を使用していますが、選択したオプションの周りのアウトラインを取り除くことができないようです。

私のコード

HTML

        <div class="drop-select">
             <select name="date" id="date">
               <option value="01">01</option>
               <option value="02">02</option>
            </select>
        </div>

かなり簡単です。

CSS

.drop-select {
    display: block;
    border: 1px solid #000;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font: 12px/14px arial, helvetica, verdana, sans-serif;
    width: 80px;
    height:25px;
    -webkit-appearance: none;
    overflow: hidden;
    background: url('http://www.adcentre.com.au/media/1326/bg-down-arrow.gif')no-repeat right #fff;
   float: left;
   margin-right: 5px;
   margin-top: 6px;
   margin-bottom: 6px;
}

.drop-select select {
   background: transparent;
   width: 125px;
   height: 25px;
   border: none;
   padding: 5px 0 0 5px;
   color: #000;
   outline:0;
}

アウトラインを 0 に、ボーダーをなしに設定しても、表示されますか?

JSFiddle での例:

http://bit.ly/SpQGC4

4

1 に答える 1

2

ここでの問題は、ドロップダウンの親でdiv.drop-selectある に黒い があることborderです。それを取り除くと、黒い枠が消えます。

outlineと混同しないでくださいborder。多くのブラウザーでoutlineは、たとえば、テキスト入力フィールドがフォーカスされるグローを定義します (この回答を Safari で書いているため、テキスト ボックスの輪郭が少しぼやけています)。境界線はアウトラインによく似たものを指しますが、一般的にはフォーム要素以外のものに使用され、一般に だけでなくすべての要素の状態に存在しますfocus。

また、一部のブラウザでは、Windows と Mac OS (Linux ディストリビューションについては不明) の両方で、フォーム要素のアウトラインにスタイルを設定できることにも言及する価値があります。

于 2012-10-28T05:24:15.920 に答える