CSS - элемент SELECT - BORDER-RADIUS - Опера, показывающая границу позади ввода ввода?Как в без изогнутой границы?

Question

У меня возникают проблемы при попытке стиля элемента select в опере.

Что происходит, так это то, что большинство стилей, примененных к этому элементу в css, показано в Opera (11.60), но по какой-то причинебиты также не учитываются, например, эффект тени блока и радиус границы.

Мне кажется, что Opera отображает элемент выбора над этими стилями, как я заметил в переходе, что изогнутая граница действительно существует, этотолько позади элемента выбора.Как и в случае, элемент выбора, когда не сфокусировано, кажется, не имеет эффекта радиуса границы, но когда фокус применяется к элементу, вы затем видите границу в переходе, затем она снова исчезает за элементом.

В IE 9,В Firefox 9 и в последней версии Chrome данный элемент select практически не отличается.И во всех, включая Opera, элемент ввода отлично сочетается с теми же стилями элементов.

Вот HTML:

<div class="searchBox">
<form method="post" action="'.$_SERVER['PHP_SELF'].'" name="search">
<label for="bizName">Biz Name:</label>
<input name="bizName" class="bizName" type="search" placeholder="Search..." />
<label for="bizCategory">Biz Category:</label>
<select name="bizCategory" class="bizCategory" onchange="this.form.submit()">
    <option>Choose</option>
</select>
<button type="submit" name="searching" class="search" value="Search">Search</button>
</form>
<!-- end .searchBox --></div>

И вот CSS страниц:

input, select {
    background: #fcfcfc;
    border: 0px none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6a6f75;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: , 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-background-clip: padding-box;
    -webkit-transition: all 0.7s ease-out 0s;  /* Saf3.2+, Chrome */
    -moz-transition: all 0.7s ease-out 0s;  /* FF4+ */
    -ms-transition: all 0.7s ease-out 0s;  /* IE10? */
    -o-transition: all 0.7s ease-out 0s;  /* Opera 10.5+ */
    transition: all 0.7s ease-out 0s;
}

input {
    padding: 7px 25px;
    width: 135px;
}

select {
    padding: 7px 10px;
    width: 185px;
}

input:focus, select:focus
{
    background: #6699cc;
    color: #e7f3ff;
    text-shadow:
        -1px -1px 0 #666,
        1px -1px 0 #666,
        -1px 1px 0 #666,
        1px 1px 0 #666;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
}

.bizCategory {
    margin-right: 15px;
}

Я не понимаю, почему Opera должна реагировать таким образом, поскольку я считаю, что она несколько поддерживает спецификацию W3C?

В любом случае, я предполагаю, что Opera применяет какой-то стиль по умолчанию к этому тегу выбора.Но это только предположение.

Сможет ли кто-нибудь еще внести свой вклад в этом отношении;или кто-нибудь, кто сталкивался с этой проблемой раньше, сможет объяснить, что именно здесь происходит?

Заранее спасибо, что нашли время прочитать это!

Answer 1

Улучшенный ответ за 2015 год:

Мне показалось, что использование стилизованных списков выбора очень необходимо для того времени, в котором мы сейчас находимся, - так что вот один раз, когда у меня был лучший опыт на данный момент. И на самом деле не существует никакого javascript-решения проблемы. Вы могли бы использовать неупорядоченный список и элементы списка и стилизовать его, а также получить информацию из выбранного li с помощью некоторого javascript и выполнить публикацию с помощью метода ajax post. IE8 + подход для этого без каких-либо рамок будет выглядеть так:

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

Если вы используете проверку структуры, встроенная программа выбирает angular и bootstrap ниже.

Угловая

Угловой отбор происходит из углового материала Вы можете придать ему стиль сумасшедшего, как хотите, или свой собственный, используя javascript для фреймворков. Я сделал то же самое.

Существует также Bootstrap UI , который представляет собой угловой каркас для всех видов полей формы.

Bootstrap

Если вы не используете angular в своем проекте, я думаю, что способ, с помощью которого начался загрузчик, это лучшее, что я использовал до сих пор. Выбор начальной загрузки

Старый ответ

Как правило, я бы сказал, никогда не переделывать кнопку выбора, но в любом случае извлекайте ее, чтобы подтвердить ее https://gist.github.com/itsadok/1139558

Если вам нужно только поразить новые браузеры, вы можете использовать это и просто стилизовать его как любой другой объект:

   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;

См. Некоторые вещи об этом ЗДЕСЬ

Или я бы выбрал javascript-решение, где многие уже сделали это и поделились так: adam.co / lab / jquery / customselect или bulgaria-web- developers.com/projects/javascript/selectbox или создайте его самостоятельно, как плагин jquery на основе ul и li

В вашем выпуске вы даже можете использовать структуру меню, такую ​​как "ul & li", которая при вызове jquery вызывает что-то вроде ЭТА СКИДКА

просто возьмите текст из ".yourtextholder" и отправьте на URL

Answer 2

Это фон элемента select, который не учитывает закругленные углы. (Аналогично фильтрам ActiveX в IE8)

Если вам не нужен определенный цвет фона, вы можете использовать полностью прозрачный фон:

select {
  background-color: rgba(255, 255, 255, 0.0)
}

Кнопка выпадающего меню по-прежнему перекрывает углы справа, но по крайней мере слева вы избавляетесь от этих "собачьих ушей".