Css select no borders

Css how to remove border from select box

We can remove border radius from Select tag by two methods as follows: Method 1: Using CSS: Use some CSS property to remove the border radius. We can use select tag and .custom-select class with form-control as follows Example: HTMLOutput: Solution: Solution 1: As i guessed, its due to bootstrap styles: it sets a box-shadow for .

How to remove border radius from Select tag using Bootstrap ?

Tag: The component is used to make a drop-down list. The component is most frequently used in a form, to gather user input. The name attribute is required to reference the form data after the form is submitted (in case you exclude the name attribute, no data from the drop-down list will be submitted). The id attribute is required to relate the drop-down list with a name. The tag inside the component characterize the accessible choices within the drop-down list.

 Option1 Option2 . . . Option n  

• autofocus: Indicates that the drop-down list ought to consequently get focus when the page loads. (value: autofocus)
• disabled: Indicates that a drop-down list ought to be disabled. (value: disabled)
• form: Characterizes which form the drop-down list has a place to. (value: form_id)
• multiple: Indicates that multiple options can be chosen at once. (value: multiple)
• name: Characterizes a name for the drop-down list. (value: name)
• required: Indicates that the user is required to choose a value some time recently submitting the form. (value: required)
• size: Characterizes the number of visible options in a drop-down list. (value: number)

We can remove border radius from Select tag by two methods as follows:

Method 1: Using CSS: Use some CSS property to remove the border radius.

HTML

Method 2: Using Bootstrap: The user-agent stylesheet for Chrome gives a border-radius of 5px to all the corners of a component. Custom select menus require as it were a custom class, .custom-select to trigger the custom styles. Custom styles are restricted to the select’s starting appearance and cannot alter the option’s due to browser restrictions.

HTML

We can use select tag and .custom-select class with form-control as follows

HTML

React select removing the border and box shadow, If you want to remove the border of the entire options list, then you need to set the style on the menu component and not on the option

How to remove focus border outline around text input boxes Easy

Select box : remove borders

Select box : remove borders, 1 Answer 1 · Thanks. · This is the only way to do what you’re asking, you need to remove the browser rendering and style it yourself (add your own

How to remove border highlight on an <select> after press it

As i guessed, its due to bootstrap styles:

.form-control:focus /* => from bootstrap css */ < . outline: 0; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* =>this cause the highlight! */ > 

it sets a box-shadow for .form-control:focus . you have to override it in your css:

input:focus, select:focus, .form-control:focus, textarea:focus, button:focus < outline: none !important; box-shadow: none !important; >body < padding: 40px 20px 20px 20px; >.qa-collapse < background-color: rgb(245, 245, 245); >.qa-input < border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-right: none !important; border: 1px solid #F2F2F2; width: 82%; padding: .25rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-image: none; background-clip: padding-box; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; >.qa-search < border-top-right-radius: 50px; border-bottom-right-radius: 50px; background-color: #E01E34; border: 1px solid #E01E34; padding: .2rem .75rem; >input[type="text"].qa-input::-webkit-input-placeholder < color: ; font-size: 80%; font-family: PosLight; >.qa-search img < margin-top: -3px; >.qa-form-inline < display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; >.qa-track-trace p < font-family: PosLight; font-size: 12px; padding: 0 2.6rem 0 0.7rem; color: #999999; >.nav-tabs < border: 0px; >.nav-tabs .nav-link.active < border: 0px; border-top-right-radius: 0; border-top-left-radius: 0; background-color: transparent; border-color: transparent; >.nav-tabs .nav-link:hover < border-color: transparent; >.nav-tabs .nav-link < border: 0px; border-top-right-radius: 0px; border-top-left-radius: 0px; background-color: transparent; >.qa-send-lp-tab < color: rgba(0, 0, 0, .5); display: block; padding: 0rem 1rem; >.qa-send-lp-tab:hover < color: rgba(0, 0, 0, .7); >.qa-send-lp-tab.active < color: #E11F34 !important; >.qa-track-trace p < font-family: PosLight; font-size: 12px; padding: 0 2.6rem 0 0.7rem; color: #999999; >.qa-input-full < border-radius: 50px; border: 1px solid #F2F2F2; width: 100%; padding: .25rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-image: none; background-clip: padding-box; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; >input[type="text"].qa-input-full::-webkit-input-placeholder < color: ; font-size: 80%; font-family: PosLight; >input[type="text"].qa-input-full::-webkit-input-placeholder < color: ; font-size: 80%; font-family: PosLight; >.qa-dropdown < border-top-right-radius: 50px; border-bottom-right-radius: 50px; background-color: #E01E34; border: 1px solid #E01E34; padding: .20rem .75rem; >.qa-dropdown img < margin-top: -3px; >select.form-control < -webkit-appearance: none; -moz-appearance: none; background: url("data:image/svg+xml;utf8,") #fff; /* background: url(../img/dropdown-2.svg); */ /* background: url(../img/dropdown.svg); */ /*background-position: 91.5% 50%; */ background-position: 95% 50%; background-repeat: no-repeat; >select.form-control:not([size]):not([multiple]) < height: 35px; border: 1px solid #F2F2F2; border-radius: 50px; border: 1px solid #F2F2F2; width: 100%; padding: .25rem .75rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; >.styled-select

Just override .form-control:focus with box-shadow: none!important;

.form-control:focus < box-shadow: none!important; >input:focus, select:focus, textarea:focus, button:focus < outline: none !important; >body < padding: 40px 20px 20px 20px; >.qa-collapse < background-color: rgb(245, 245, 245); >.qa-input < border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-right: none !important; border: 1px solid #F2F2F2; width: 82%; padding: .25rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-image: none; background-clip: padding-box; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; >.qa-search < border-top-right-radius: 50px; border-bottom-right-radius: 50px; background-color: #E01E34; border: 1px solid #E01E34; padding: .2rem .75rem; >input[type="text"].qa-input::-webkit-input-placeholder < color: ; font-size: 80%; font-family: PosLight; >.qa-search img < margin-top: -3px; >.qa-form-inline < display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; >.qa-track-trace p < font-family: PosLight; font-size: 12px; padding: 0 2.6rem 0 0.7rem; color: #999999; >.nav-tabs < border: 0px; >.nav-tabs .nav-link.active < border: 0px; border-top-right-radius: 0; border-top-left-radius: 0; background-color: transparent; border-color: transparent; >.nav-tabs .nav-link:hover < border-color: transparent; >.nav-tabs .nav-link < border: 0px; border-top-right-radius: 0px; border-top-left-radius: 0px; background-color: transparent; >.qa-send-lp-tab < color: rgba(0, 0, 0, .5); display: block; padding: 0rem 1rem; >.qa-send-lp-tab:hover < color: rgba(0, 0, 0, .7); >.qa-send-lp-tab.active < color: #E11F34 !important; >.qa-track-trace p < font-family: PosLight; font-size: 12px; padding: 0 2.6rem 0 0.7rem; color: #999999; >.qa-input-full < border-radius: 50px; border: 1px solid #F2F2F2; width: 100%; padding: .25rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-image: none; background-clip: padding-box; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; >input[type="text"].qa-input-full::-webkit-input-placeholder < color: ; font-size: 80%; font-family: PosLight; >input[type="text"].qa-input-full::-webkit-input-placeholder < color: ; font-size: 80%; font-family: PosLight; >.qa-dropdown < border-top-right-radius: 50px; border-bottom-right-radius: 50px; background-color: #E01E34; border: 1px solid #E01E34; padding: .20rem .75rem; >.qa-dropdown img < margin-top: -3px; >select.form-control < -webkit-appearance: none; -moz-appearance: none; background: url("data:image/svg+xml;utf8,") #fff; /* background: url(../img/dropdown-2.svg); */ /* background: url(../img/dropdown.svg); */ /*background-position: 91.5% 50%; */ background-position: 95% 50%; background-repeat: no-repeat; >select.form-control:not([size]):not([multiple]) < height: 35px; border: 1px solid #F2F2F2; border-radius: 50px; border: 1px solid #F2F2F2; width: 100%; padding: .25rem .75rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; >.styled-select

And if you want to do this just for select use this:

React-Select Remove focus border, This will ensure the border remains when inactive, hovered or active but there is no blue box shadow. Share.

Источник

Стилизация Select с помощью css, как будто это 2020

Select – этот элемент трудно стилизовать для всех браузеров. Чтобы избегать его недостатки раньше, мы использовали обходные пути, такие как стилизация родительского элемента, добавление псевдоэлементов и даже использование JavaScript для создания подобного элемента управления из различных элементов, которые легче стилизовать. Но обходные пути сложно поддерживать и использовать, не говоря уже о проблемах доступности, которые создают пользовательские элементы.

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

Быстрый Пример

Вот элемент select без стиля . Он будет выглядеть немного иначе, в зависимости от браузера, который вы используете.

Ниже представлен тот же элемент select, стилизованный непосредственно с помощью CSS. Никаких дополнительных элементов обертки или псевдоэлементов не требуется (за исключением одного, который необходим для IE10 +):

HTML-код для приведенного select приведен ниже. Обратите внимание, что CSS применяется к любому select с классом select-css.

 This is a native select element Apples Bananas Grapes Oranges 

А вот CSS, управляющий select:

.select-css < display: block; font-size: 16px; font-family: sans-serif; font-weight: 700; color: #444; line-height: 1.3; padding: .6em 1.4em .5em .8em; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; border: 1px solid #aaa; box-shadow: 0 1px 0 1px rgba(0,0,0,.04); border-radius: .5em; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); background-repeat: no-repeat, repeat; background-position: right .7em top 50%, 0 0; background-size: .65em auto, 100%; >.select-css::-ms-expand < display: none; >.select-css:hover < border-color: #888; >.select-css:focus < border-color: #aaa; box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); box-shadow: 0 0 0 3px -moz-mac-focusring; color: #222; outline: none; >.select-css option < font-weight:normal; >*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css

Примечания по CSS

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

• Select Устанавливается на display: block; по умолчанию, но вы можете поменять его, display: inline-block; width: auto; если хотите, чтобы он сидел рядом с label.
• Фон select создается с использованием двух фоновых изображений: первое — это значок стрелки svg (выраженный в виде URI данных), а второе — повторяющийся линейный градиент. Любой URL может быть внешним изображением, если хотите. Если вы меняете изображение значка, имейте в виду, что его размер установлен в первом разделе последующего background-size: .65em auto, 100%; свойства. И его положение задается через background-position: right .7em top 50%, 0 0;(который находится .7em с правой стороны, соответственно). Кроме того, если размер изменяется, вы можете захотеть сделать более правый отступ для кнопки, чтобы она не перекрывала select текст, но имейте в виду, что в IE9 и более ранних версиях пользовательская стрелка не появится и браузер по умолчанию Стрелка будет отображаться слева от отступа, поэтому не добавляйте слишком много, иначе стрелка IE9 будет вставлена ​​очень далеко.
• Важно сохранить линейный градиентный фон, потому что его наличие на самом деле мешает IE9 и старше распознавать свойство background, и в результате он не будет показывать пользовательский значок рядом со своим невидимым собственным. Если вы хотите плоский цвет, используйте линейный градиент между двумя одинаковыми значениями цвета.
• Appearance Правило и его и приставочные версии имеют важное значение, чтобы сбросить стили некоторых браузеров по умолчанию.
• font-size: 16px; Правило важно , потому что IOS Safari будет увеличивать его в макете сайта , если select текст меньше 16px. Обычно такое поведение раздражает, поэтому мы стараемся избегать его с размером шрифта 16 пикселей на select.
• .select-css::-ms-expand Правило предписывает IE11 и IE10 , чтобы скрыть псевдоэлемент меню значка, поэтому может появиться пользовательский значок позади него.

Как это выглядит в разных браузерах

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

Наслаждайтесь!

Обновление статьи 3.06.20

Стилизация пунктов option

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

2. С помощью стилизации label со скрытыми input

3. С помощью списка li и скрытого input

Стилизация — это конечно хорошо, но доступность нужна не меньше.

Заменяя стандартные элементы управления самодельными, придется реализовывать штатные возможности самостоятельно.
В последних двух приведенных примерах без мыши/тачскрина (с помощью клавиатуры/скринридера) сделать ничего нельзя. Скринридер в режиме чтения тоже ограничен. После долгих изысканий в дизайне и функционале я пришел к выводу, что лучше просто оставить select как есть.

И это все. Спасибо за прочтение.

Источник