selectからテキストインデントを削除する（Windows）

Question

ネイティブ選択フィールドのパディング/テキストインデントを削除するには、クロスブラウザソリューションが必要です。 padding: 0を使用しても完全に削除されていないようです。

ここでは、左側のテキストのないスペースで、クロームのスクリーンショットです：

そしてここでは、左側にあるいくつかのテキストのスペースを持っているのFirefoxのスクリーンショットです：

ただし、パディングを削除する必要があります。 Edge/IE11/Safariなど、Firefoxのみのソリューションではなく、クロスブラウザソリューションであるべきです。

select { 
 
    font-size: 18px; 
 
    height: 38px; 
 
    line-height: 38px; 
 
    padding: 0; 
 
    width: 100%; 
 
    background-color: red; 
 
    color: #000000; 
 
    display: block; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    outline: 0; 
 
    border-color: #000000; 
 
    border-width: 0 0 1px 0; 
 
    border-style: solid; 
 
} 
 

 
option { 
 
    padding: 0; 
 
}

<select> 
 
    <option value="test1">Test 1</option> 
 
    <option value="test2">Test 2</option> 
 
    <option value="test3">Test 3</option> 
 
</select>

フィドル：https://jsfiddle.net/cbkopypv/1/

Answer 1

これは、いくつかの回答、コメント、私自身のIE11ハックの組み合わせです。 I IE11、エッジ、クロム、Firefoxの（Windowsの場合）およびSafari 10（MacOSの）でそれをテストし、それが動作しました：

.select-container { 
 
    overflow: hidden; 
 
} 
 

 
select { 
 
    font-size: 18px; 
 
    height: 38px; 
 
    line-height: 38px; 
 
    padding: 0; 
 
    width: 100%; 
 
    background-color: red; 
 
    color: #000000; 
 
    display: block; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    outline: 0; 
 
    border-color: #000000; 
 
    border-width: 0 0 1px 0; 
 
    border-style: solid; 
 
} 
 

 
option { 
 
    padding: 0; 
 
} 
 

 

 
/* Firefox: */ 
 

 
@-moz-document url-prefix() { 
 
    select { 
 
    text-indent: -2px; 
 
    } 
 
} 
 

 

 
/* Edge: */ 
 

 
@supports (-ms-ime-align: auto) { 
 
    select { 
 
    width: calc(100% + 4px); 
 
    margin-left: -4px; 
 
    } 
 
} 
 

 

 
/* IE11: */ 
 

 
@media screen and (-ms-high-contrast: active), 
 
screen and (-ms-high-contrast: none) { 
 
    select { 
 
    width: calc(100% + 4px); 
 
    margin-left: -3px; 
 
    } 
 
}

<div class="select-container"> 
 
    <select> 
 
    <option value="test1">Test 1</option> 
 
    <option value="test2">Test 2</option> 
 
    <option value="test3">Test 3</option> 
 
    </select> 
 
</div>

フィドル：https://jsfiddle.net/cbkopypv/13/

我々はできませんmarginハックのエッジ& IE11も使用してください。ドロップダウンにもマイナスの余裕が生じます。 IE11とEdgeでは、Firefoxのハックをtext-indentで使用することはできません。機能しないためです。

ありがとうございました。

Answer 2

Firefoxでこの余分な空白は、ブラウザのレンダリングエンジンによって追加され

は、ここでは、コードです。フォーム要素のレンダリングはブラウザ間で矛盾しており、この場合はCSSによって決定されません。

これは役立つかもしれない：

article from Mozilla explaining some ways to mitigate select box incosistency

Smashing Magazine(It's about styling form elements)

Answer 3

を。これは、クリーンなソリューションではありませんが、それは動作します：0にパディングをresetingに加えて

、あなたが使用することができますtext-indentプロパティを使用し、ブラウザごとに異なる値を設定します。

のSafariとChromeは良いですが、あなたはだけなので同じようFFとIEで2ピクセル左にそれらをシフトすることができるようにFirefoxとエッジは、2ピクセルでオフになっているように見える：

// firefox 
@-moz-document url-prefix() { 
    select { 
    text-indent: -2px 
    } 
} 

// Edge 
@supports (-ms-ime-align: auto) { 
    select { 
    text-indent: -2px 
    } 
} 

者は、主要なブラウザをカバー他のブラウザや端末などをターゲットにする必要があると思われる場合は、browserhacks.comを確認してください。

browserhacks.comに応じ

---

はIE /エッジ≥10を標的とする別の方法のように見えることは_:-ms-input-placeholder, :root .selector

あるので、あなたは追加することができます。私のために働いているようだ

_:-ms-input-placeholder, :root select { 
    text-indent:-2px 
} 

、希望が動作します今あなたのためにも。

fiddle

fiddle with new IE updates

Answer 4

これは多少回避策のであるとブラウザに基づく条件文が必要です。真のクロスブラウザソリューションが利用可能であるとは思えません。

選択要素をコンテナ要素内に配置します。その容器にのhiddenを与え、selectを左に数ピクセル置き換えます。これには、IE/Edge（どちらも同じ）、Firefox、およびChrome（元のコードで動作）用に若干異なるCSSを実行する必要があります。

IE11とエッジの両方のために、次の作品：

select { 
 
    font-size: 18px; 
 
    height: 38px; 
 
    line-height: 38px; 
 
    padding: 0; 
 
    width: 100%; 
 
    background-color: red; 
 
    color: #000000; 
 
    display: block; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    outline: 0; 
 
    border-color: #000000; 
 
    border-width: 0 0 1px 0; 
 
    border-style: solid; 
 
    margin-left: -2px; 
 
} 
 

 
option { 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    overflow: hidden; 
 
}

<div class="container"> 
 
    <select> 
 
    <option value="test1">Test 1</option> 
 
    <option value="test2">Test 2</option> 
 
    <option value="test3">Test 3</option> 
 
    </select> 
 
</div>

Firefoxの場合

は、margin-left: -4px

Here's the fiddle for IE/Edge

Answer 5

これと他のブラウザの不整合の全体の束を使用することができます'css reset'ファイルを使って対処してください。私は私のプロジェクトのすべてに最もよく使用され、1の一つが「normalize.css」です： 追加のCSSのこの小さな量は、すべてのブラウザが同様acheivedことができると（同じコンテンツをレンダリングすることが保証さhttps://necolas.github.io/normalize.css/

、 少なくとも）。

この問題を解決するには、normalizeの<select>タグルールを使用して、行の高さ、インデントなどがすべてのブラウザで一貫して表示されるようにします。その後、あなた自身のCSSスタイルでそれをオーバールールすると - この場合： padding:0; margin:0; これはすべての対象ブラウザでそのように表示されます。

こちらがお役に立てば幸いです。 Normalize.cssは、私が最初に見つけたと思ったツールの1つです。また、あなたがそれらを持っている前に、あなたがまだ遭遇していないレイアウトの問題も解決します。