Удаление закругленных углов из элемента в Chrome/Webkit
таблица стилей user-agent для Chrome дает радиус границы 5px для всех углов a <select>
элемент. Я попытался избавиться от этого, применив радиус 0px через мою внешнюю таблицу стилей, а также встроенную в сам элемент; я пробовал оба border-radius:0px
и -webkit-border-radius:0px;
и я пробовал еще более конкретные border-top-left-radius:0px
(вместе с его эквивалентом-webkit).
никто не работает.
когда я рассматриваю элемент в инструментах разработчика webkit, вычисленный Стиль по-прежнему перечисляет радиус в 5 пикселей. Но если я нажму стрелку расширителя рядом с ним, чтобы увидеть специфику, он читает: элемент.стиль - 0px. И ниже он показывает внешнюю спецификацию css, которую я дал 0px, а также спецификацию таблицы стилей user-agent 5px. И оба эти последние два перечеркнуты, как и должно быть.
какие идеи?
14 ответов:
это работает для меня (стили первый внешний вид не выпадающий список):
select { -webkit-appearance: none; -webkit-border-radius: 0px; }
просто мое решение с выпадающим изображения
(inline svg)
select.form-control { -webkit-appearance: none; -webkit-border-radius: 0px; background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='#444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>"); background-position: 100% 50%; background-repeat: no-repeat; }
альтернатива (как выше один не работает с последней firefox)
select.form-control { -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0px; background-image: url("https://image.flaticon.com/icons/svg/60/60781.svg"); background-position: 99% 50%; background-repeat: no-repeat; background-size: 16px; }
Я использую bootstrap вот почему я использовал
select.form-control
Вы можете использоватьselect{
илиselect.your-custom-class{
вместо.
Если вы хотите квадратные границы и все еще хотите маленькую стрелку расширителя, я рекомендую это:
select.squarecorners{ border: 0; outline: 1px solid #CCC; background-color: white; }
в то время как верхний ответ удаляет границу, он также удаляет стрелку, что делает его чрезвычайно трудным, если не невозможным для пользователя, чтобы идентифицировать элемент как select.
мое решение состояло в том, чтобы просто вставить белый div (с радиусом границы:0px) за select. Установите его положение в абсолютное, его высота до высоты выбора, и вы должны быть хорошо идти!
некоторые хорошие решения здесь, но это не нужно SVG, сохраняет границу через
outline
и устанавливает его легла на кнопку.select { height: 20px; -webkit-border-radius: 0; border: 0; outline: 1px solid #ccc; outline-offset: -1px; }
<select> <option>Apple</option> <option>Ball</option> <option>Cat</option> </select>
вставка box-тень делает трюк.
select{ -webkit-appearance: none; box-shadow: inset 0px 0px 0px 4px; border-radius: 0px; border: none; padding:20px 150px 20px 10px; }
по какой-то причине это на самом деле зависит от цвета границы??? При использовании стандартного цвета углы остаются закругленными, но если вы измените цвет даже немного, округление исчезнет.
select.regularcolor { border-color: rgb(169, 169, 169); } select.offcolor { border-color: rgb(170, 170, 170); }
ну, я получил решение. надеюсь, что это может помочь вам :)
select{ border-image: url(http://www.w3schools.com/cssref/border.png) 30 stretch; width: 120px; height: 36px; color: #999; }
<select> <option value="1">Hi</option> <option value="2">Bye</option> </select>
устранение стрелок следует избегать. Решение, которое сохраняет стрелки выпадающего списка, состоит в том, чтобы сначала удалить стили из выпадающего списка:
.myDropdown { background-color: #yourbg; border-style: none; }
затем создайте div непосредственно перед выпадающим списком в вашем HTML:
<div class="myDiv"></div> <select class="myDropdown...">...</select>
и стиль div, как это:
.myDiv { background-color: #yourbg; border-style: none; position: absolute; display: inline; border: 1px solid #acolor; }
дисплей встроенный будет держать div от перехода к новой строке, абсолютная позиция удаляет его из потока страницы. Конечным результатом является хороший, чистый, можно подчеркнуть стиль, как вы хотите, и ваш выпадающий список по-прежнему ведет себя так, как ожидал бы пользователь.
один из способов сохранить его простым и избежать возиться со стрелками и другими такими функциями-просто разместить его в div с тем же цветом фона, что и тег select.
решение с пользовательской правой стрелкой раскрывающегося списка, использует только css (без изображений)
select { -webkit-appearance: none; -webkit-border-radius: 0px; background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em; background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat; -moz-appearance: none; display: block; padding: 0.3rem; height: 2rem; width: 100%; }
<html> <body> <br/> <h4>Example</h4> <select> <option></option> <option>Hello</option> <option>World</option> </select> </body> </html>
я использовал решение jordan314, но затем я добавил класс "border-light" для выбора. Если у вас есть класс border-light по умолчанию, определенный в css, вы можете напрямую использовать его. Он просто определяет границу как белый). Я изменил границу на квадрат / убрал радиус и сохранил стрелку.
вот что я сделал:
<select class="form-control border border-light" id="type"> <option>Select</option> <option value="mobile">Apple</option> </select>
Если у вас нет предопределенного border-light, просто добавьте в свой css:
<style> .border-light{ border-color:#f8f9fa!important } #type { border:0; outline:1px solid #ddd; background-color:white; } </style>