[css] 선택 상자에서 텍스트를 가운데에 배치 할 수 있습니까?

Program / 글쓴이

나는 이것을 시도했다 : 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 전용 방법이 있습니까?

답변

일반 CSS로는 이것이 불가능하고 브라우저 간 완벽하게 호환되도록 할 수 없습니다.

그러나 jQuery 플러그인을 사용하면 드롭 다운의 스타일을 지정할 수 있습니다.

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

이 플러그인은 select요소를 숨기고 span사용자 정의 드롭 다운 목록 스타일을 표시하기 위해 요소 등을 즉석에서 만듭니다 . 스팬 등의 스타일을 변경하여 항목을 중앙 정렬 할 수 있다고 확신합니다.

답변

Chrome 에는 부분적인 해결책이 있습니다 .

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

선택한 옵션의 가운데에 있지만 드롭 다운 내의 옵션에는 없습니다.

답변

맞습니다. 시도 해봐:

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

text-align-last속성에 대한 브라우저 지원은 여기에서 찾을 수 있습니다 : https://www.w3schools.com/cssref/css3_pr_text-align-last.asp
Safari 만 지원하지 않는 것 같습니다.

답변

CSS 규칙을 select 클래스에 넣어야합니다.

CSS 텍스트 들여 쓰기 사용

예

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

CSS 코드 

select { text-indent: 5px; }

답변

네 가능합니다. 마지막 텍스트 정렬을 사용할 수 있습니다

text-align-last: center;

답변

2020 년, 나는 다음을 사용하고있다 :

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

답변

그냥 이것을 사용하십시오 : 

select {

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

}