css - 選択ボックスの中央にテキストを配置することはできますか？

Question

私はこれを試しました：http：//jsfiddle.net/ilyaD/KGcC3/

HTML：

<select name="state" class="ddList">
    <option value="">(please select a state)</option>
    <option class="lt" value="--">none</option>
    <option class="lt" value="AL">Alabama</option>
    <option class="lt" value="AK">Alaska</option>
    <option class="lt" value="AZ">Arizona</option>
    <option class="lt" value="AR">Arkansas</option>
    <option class="lt" value="CA">California</option>
    <option class="lt" value="CO">Colorado</option>
</select>

CSS：

select { width: 400px; text-align: center; }
select .lt { text-align: center; }

ご覧のとおり、機能しません。選択ボックスのテキストを中央に配置するCSSのみの方法はありますか？

score 465 · Accepted Answer

Chromeには部分的な解決策があります：

select { width: 400px; text-align-last:center; }

選択したオプションは中央に配置されますが、ドロップダウン内のオプションは中央に配置されません。

score 97 · Accepted Answer

それは正しく整列するためです。それを試してみてください：

select{
    text-align-last:right;
    padding-right: 29px;
    direction: rtl;
}

属性のブラウザサポートはtext-align-lastここで見つけることができます：https ：//www.w3schools.com/cssref/css3_pr_text-align-last.aspSafari だけがまだそれをサポートしていないようです。

score 63 · Accepted Answer

CSSルールをselectクラスに配置する必要があります。

CSSテキストインデントを使用する

例

<select class="day"> /* option 1 option 2 option 3 option 4 option 5 here */ </select>

CSSコード

select { text-indent: 5px; }

score 62 · Accepted Answer

62

はい、可能です。text-align-lastを使用できます

text-align-last: center;

于 2019-05-11T12:46:11.983 に答える

score 58 · Accepted Answer

2020年、私は使用しています：

select {
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}

score 35 · Accepted Answer

これはプレーンCSSでは不可能であり、完全にクロスブラウザー互換にすることはできません。

ただし、jQueryプラグインを使用すると、ドロップダウンのスタイルを設定できます。

https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html

このプラグインはselect要素を非表示にし、要素などをその場で作成spanして、カスタムのドロップダウンリストスタイルを表示します。スパンなどのスタイルを変更して、アイテムを中央揃えにすることができると確信しています。

score 23 · Accepted Answer

23

これを使用するだけです：

select {

text-align-last: center;
padding-right: 29px;

}

于 2017-06-12T12:30:51.897 に答える

score 22 · Accepted Answer

select {
  text-align: center;
  text-align-last: center;
}
option {
  text-align: left;
}

<select>
   <option value="">(please select a state)</option>
   <option class="lt" value="--">none</option>
   <option class="lt" value="AL">Alabama</option>
   <option class="lt" value="AK">Alaska</option>
   <option class="lt" value="AZ">Arizona</option>
   <option class="lt" value="AR">Arkansas</option>
   <option class="lt" value="CA">California</option>
   <option class="lt" value="CO">Colorado</option>
</select>

score 17 · Accepted Answer

このJS関数はあなたのために働くはずです

function getTextWidth(txt) {
  var $elm = $('<span class="tempforSize">'+txt+'</span>').prependTo("body");
  var elmWidth = $elm.width();
  $elm.remove();
  return elmWidth;
}
function centerSelect($elm) {
    var optionWidth = getTextWidth($elm.children(":selected").html())
    var emptySpace =   $elm.width()- optionWidth;
    $elm.css("text-indent", (emptySpace/2) - 10);// -10 for some browers to remove the right toggle control width
}
// on start 
$('.centerSelect').each(function(){
  centerSelect($(this));
});
// on change
$('.centerSelect').on('change', function(){
  centerSelect($(this));
});

ここに完全なCodepen：http：//codepen.io/anon/pen/NxyovL

score 10 · Accepted Answer

私はいつも次のハックで逃げて、cssだけで動作させるようにしています。

padding-left: 45%;
font-size: 50px;

パディングはテキストを中央に配置し、テキストサイズに合わせて微調整できます:)

これは、検証の観点からは明らかに100％正しくはないと思いますが、機能します:)

score 7 · Accepted Answer

テキストの長さが似ているオプションのリストがある場合の代替の「偽の」ソリューション（たとえば、ページ選択）：

padding-left: calc(50% - 1em);

これはChrome、Firefox、Edgeで機能します。ここでの秘訣は、テキストを左から中央にプッシュしてから、長さの半分をpx、em、またはオプションテキストのいずれかで差し引くことです。

最良のソリューションIMO（2017年）は、JSを介して選択を置き換え、独自の偽の選択ボックスをdivなどで構築し、クロスブラウザーサポートのためにクリックイベントをバインドしています。

score 5 · Accepted Answer

中央揃えではありませんが、上記の例を使用すると、選択ボックスに左マージンを作成できます。

<style>.UName { text-indent: 5px; }</style><br>

<select  name="UserName" id="UserName" size="1">
    <option class="UName" selected value="select">Select User</option>
    <option class="UName" value="User1">User 1 Name</option>
    <option class="UName" value="User2">User 2 Name </option>
    <option class="UName" value="User3">User 3 Name</option>
</select>

score 5 · Accepted Answer

5

これは私のために働いた：

text-align: center;
text-align-last: center;

于 2018-05-14T00:31:31.543 に答える

score 5 · Accepted Answer

5

これを試して：

select {
    padding-left: 50% !important;
    width: 100%;
}

于 2018-06-12T09:04:16.753 に答える

score 2 · Accepted Answer

あなたは本当にカスタマイズすることはできませ<select>ん<option>。唯一の方法（クロスブラウザー）は、divとcss / jsを使用して手動でドロップダウンを作成し、同様のものを作成することです。

score 2 · Accepted Answer

解決策が見つからなかった場合は、angularjsでこのトリックを使用するか、jsを使用して選択した値をdivのテキストにマッピングできます。このソリューションはAngularで完全にcssに準拠していますが、selectとdivの間のマッピングが必要です。

var myApp = angular.module('myApp', []);

myApp.controller('selectCtrl', ['$scope',
  function($scope) {
    $scope.value = '';


  }
]);

.ghostSelect {
  opacity: 0.1;
  /* Should be 0 to avoid the select visibility but not visibility:hidden*/
  display: block;
  width: 200px;
  position: absolute;
}
.select {
  border: 1px solid black;
  height: 20px;
  width: 200px;
  text-align: center;
  border-radius: 5px;
  display: block;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-guide-concepts-1-production</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
  <div ng-app ng-controller="selectCtrl">
    <div class=select>
      <select ng-model="value" class="ghostSelect">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
      </select>
      <div>{{value}}
      </div>
    </div>
  </div>
</body>

phonegapでこの解決策を見つけるのに1日かかったので、これが誰かに役立つことを願っています。

score 1 · Accepted Answer

オプションテキストを選択範囲の中央に配置することはできませんが、絶対位置のdivを選択範囲の上部に配置して同じ効果を得ることができます。

#centered
{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 818px;
  height: 37px;
  text-align: center;
  font: bold 24pt calibri;
  background-color: white;
  z-index: 100;
}

#selectToCenter
{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 840px;
  height: 40px;
  font: bold 24pt calibri;
}

$('#selectToCenter').on('change', function () {
    $('#centered').text($(this).find('option:selected').text());
});

<select id="selectToCenter"></select>
<div id="centered"></div>

divとselectの両方がドキュメント内で固定されていることを確認してください。

score 1 · Accepted Answer

選択した使用幅：自動で、テキストの長さを確認するためのパディングなし。私は選択で100％使用可能な幅を使用しており、すべてのオプションの長さが同じであるため、非常に単純なcssを使用できます。

text-indentは、パディングと同様に、テキストを左から移動します-左
120pxは私のテキストの長さです-中央に配置したいので、そのサイズの半分と選択したサイズの半分を取り、50％-60pxのままにします

select{
  width: 100%;
  text-indent: calc(50% - 60px);
}

オプションのサイズが異なる場合はどうなりますか？

可能性はありますが、解決策はきれいなものではありません。
前者の解決策では、オプションの違いが5文字のようになっていない場合、中心に近づく可能性があります。

それでもより正確に中央に配置する必要がある場合は、これを行うことができます

このクラスを準備します。

.realWidth{
   width: auto;
}

onChangeリスナーを適用して要素を選択します

そのリスナーで.realWidthを選択要素に適用します

const selectRef = document.getElementById("yourId");
selectRef.classList.add("realWidth");

オプションの実際の幅にアクセスできます。

const widthOfSelect = selectRef.getBoundingClientRect().width / 2;

widthOfSelectは、探している幅です。グローバル/コンポーネント変数に保存します。

realWidthを削除します。もう必要ありません。

selectRef.classList.remove("realWidth");

私はreactを使用していますが、これがバニラで機能するかどうかはわかりません。そうでない場合は、別の解決策を見つける必要があります。

<select style={`textIndent: calc(50% - ${widthOfSelect}) %`}> ... </select>

ただし、別の解決策は、jsを使用してCSSクラスを作成し、それを先頭に置くことである可能性があります。

長所：

おそらく機能します。動的ソリューションは試していませんが、機能するはずです。

短所：

プログラムが十分に速くない場合、ユーザーは幅を見るでしょう：自動が行われているので、何が起こっているのか疑問に思います。その場合は、複製selectを作成し、z-indexが高いものの背後に隠して、onselectリスナーを元の複製から非表示の複製に適用します。
バニラの制限のためにスタイルをインライン化できない場合は使いにくいかもしれませんが、ヘッドへのappendChildを最適化するスクリプトを作成できます。

score 0 · Accepted Answer

私はクライアントがこれを主張しているこの問題に遭遇しました、そして彼らはMacとiPhoneにいました。

メディアクエリとパディング左のパーセンテージパディングを使用することになりました。これは満足のいく解決策でしたか？まったくありませんが、先に進みます。

score 0 · Accepted Answer

0

最も簡単な方法：パディングを使用-左

select{
   padding-left:2rem
}

于 2021-08-06T08:43:20.840 に答える

score -1 · Accepted Answer

まだ100％ではありませんが、このスニペットを使用できます。

text-align-last：center; // Chromeの場合text-align：center; //Firefoxの場合

現時点では、SafariまたはEdgeでは機能しません。

score -3 · Accepted Answer

オプションが静的な場合は、選択ボックスで変更イベントをリッスンし、個々のアイテムごとにパディングを追加できます。

$('#id').change(function() {
    var select = $('#id');
    var val = $(this).val();

    switch(val) {
        case 'ValOne':
            select.css('padding-left', '30px');
            break;
        case 'ValTwoLonger':
            select.css('padding-left', '20px');
             break;
        default:
            return;
    }
});

css - 選択ボックスの中央にテキストを配置することはできますか？

22 に答える 22

Related

Reference