Tôi đã cố căn chỉnh văn bản trong phần tử <select> ở bên phải hoặc trung tâm trong safari. Nhưng không có gì hiệu quả. text-align:center; hoạt động ở tất cả các trình duyệt ngoại trừ safari. direction:rtl; và dir="rtl" không làm gì cả. danh sách luôn được căn chỉnh ở bên trái trong Safari. -webkit-appearance: none; cũng không giúp ích gì. Tôi cần một giải pháp.văn bản căn chỉnh không hoạt động trên safari <select>
Đối với Safari
text-align: -webkit-center;
Tuy nhiên, cách tốt nhất để phân tích làm việc của HTML/CSS là Web-Inspector trong Safari.
Như tôi đã nói ở trên nhận xét của tôi Tôi biết điều này không thực sự là một giải pháp css, nhưng nếu nó quan trọng với bạn là này hoạt động như một công trình xung quanh nếu bạn sẵn sàng để sử dụng jquery. ... nó không hoạt động trong chrome một cách chính xác, nhưng nếu bạn kiểm tra các trình duyệt mà bạn chỉ có thể tải nó cho safari:
này đã làm việc cho tôi.
select {
text-align:-moz-center;
text-align:-webkit-center;
}
nó không hoạt động trên các phiên bản cũ. Có thể bạn đang sử dụng phiên bản mới, vui lòng xem ngày câu hỏi trước khi trả lời. – shnisaka
Không hoạt động. xin vui lòng không trả lời mà không cần thử nghiệm. –
@SunnyKhatri Ông rõ ràng nói rằng nó làm việc cho anh ta, vì vậy ông đã kiểm tra nó. Nó có thể hoạt động trong năm 2013 –
Nếu bạn không tìm thấy bất kỳ giải pháp, bạn có thể sử dụng thủ thuật này trên angularjs hoặc sử dụng js để lập bản đồ giá trị được lựa chọn với một văn bản trên div, giải pháp này là đầy đủ css phù hợp trên góc nhưng cần một ánh xạ giữa lựa chọn và 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>Hy vọng điều này có thể có ích cho một ai đó vì nó đã cho tôi một ngày để tìm giải pháp này trên PhoneGap.
Là lỗi trong safari.
Bug 40.216 - text-align không hoạt động trên một số thẻ
https://bugs.webkit.org/show_bug.cgi?id=40216
Filed 2010
bạn đã cố gắng đặt nó vào "tùy chọn" thẻ thay vì chọn? – Trey
có. Nó cho kết quả tương tự – shnisaka
Tôi đã chơi với nó và nhìn xung quanh, tôi không thể tìm thấy một giải pháp css ... đây là một cái gì đó với jquery rằng hầu như các công trình http://jsfiddle.net/nEGV4/ – Trey