Usuń promień obramowania z tagu Select w programie bootstrap 3


133

Wydaje się, że to trywialny problem, ale nie mogę tego rozgryźć.

Na własnej witrynie Bootstraps mają przykład Select.

wybór bootstrap



Patrząc na kod, wygląda na to, że wybrany element ma promień obramowania równy 4. wprowadź opis obrazu tutaj



Mam nadzieję, że zmiana tego border-radius na 0 spowoduje usunięcie border-radius z elementu select, jednak tak nie jest - jak widać na poniższym obrazku.

wprowadź opis obrazu tutaj



Zbadałem cały CSS, który zmienia ten element zaznaczania, ale żaden z nich nie wydaje się usuwać promienia obramowania.


1
Zmiana promienia obramowania w .form-controlklasie działa dobrze dla mnie. bootply.com/Q7goAsFc0B
j08691

1
Nawet w twoim przykładzie są zaokrąglone rogi tego wybranego elementu ...?
Tyler McGinnis

2
Okazuje się, że to problem z Chrome. Otwieranie bootply w przeglądarce Firefox nie jest zaokrąglane. Dziwne.
Tyler McGinnis

Działa dla mnie zarówno w Chrome, jak i FF.
j08691

1
dla mnie nie działa w chrome, ale działa dobrze w firefox
Maverick

Odpowiedzi:


256

Oto wersja, która działa we wszystkich nowoczesnych przeglądarkach. Klucz jest używany, appearance:nonektóry usuwa domyślne formatowanie. Ponieważ całe formatowanie zniknęło, musisz dodać z powrotem strzałkę, która wizualnie odróżnia wybór od danych wejściowych. Uwaga: appearancenie jest obsługiwane w IE .

Przykład roboczy: https://jsfiddle.net/gs2q1c7p/

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
    padding: .5em;
    padding-right: 1.5em
}

#mySelect {
    border-radius: 0
}
<select id="mySelect">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

W oparciu o sugestię Arno Tenkinka w komentarzach, oto przykład z użyciem pliku zamiast dla ikony strzałki.

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" version="1"><path d="M4 8L0 4h8z"/></svg>');
    padding: .5em;
    padding-right: 1.5em
}

#mySelect {
    border-radius: 0
}
<select id="mySelect">
    <option>Option 1</option>
    <option>Option 2</option>
</select>


26
To powinna być prawdziwa odpowiedź.
avoliva

1
To lepsza odpowiedź niż wybrana
Chris James Champeau

7
Możesz również użyć do tego pliku SVG. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="12px" viewBox="0 0 14 12" enable-background="new 0 0 14 12" xml:space="preserve"> <polygon points="3.862,7.931 0,4.069 7.725,4.069 "/></svg>oszczędza to samo miejsce na pliki. Jest również buforowalny i łatwiejszy w utrzymaniu. Skopiuj to do pliku i zapisz jako .svg i użyj jako tła.
Arno Tenkink

1
to jest odpowiedź.
Conrad Warhol

2
To zdecydowanie najlepsza odpowiedź. Kilka razy szukałem sposobu, aby to zrobić. To powinno bardzo pomóc, dzięki! :)
jaredwilli

215

Oprócz tego border-radius: 0dodaj -webkit-appearance: none;.


2
rozwiązanie jest prawidłowe - ale brak możliwości zrozumienia, dlaczego tak się dzieje w narzędziach programistycznych, jest po prostu błędem. dzięki za rozwiązanie zagadki!
mmln

101
Działa ale nie idealnie, -webkit-appearance: none;spowoduje zaznaczony brak wskaźnika strzałki po prawej stronie.
nightire

41
@nightire on pracował dla mnie, jeśli używasz border: 0i dodać obrys, takie jak: outline: 1px inset black; outline-offset:-1px. Zachowaj strzały i możesz sfałszować granicę konturem.
Filipe Pereira

2
Tak, to nie jest rozwiązanie, ponieważ, jak wszyscy mówili, strzałka selektora znika.
Chad Johnson

2
Nie zapomnij o IE! :) select :: - ms-expand {display: none; }
Kyle Hawk

13

Miałem ten sam problem i chociaż odpowiedź użytkownika1732055 naprawia granicę, usuwa strzałki rozwijane. Rozwiązałem to, usuwając obramowanie z selectelementu i tworząc opakowanie, spanktóre ma obramowanie.

html:

<span class="select-wrapper">
    <select class="form-control no-radius">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</span>

css:

select.no-radius{
    border:none;
}    
.select-wrapper{
    border: 1px solid black;
    border-radius: 0px;
}

https://jsfiddle.net/Lrqh0drd/6/


Działa to tylko wtedy, gdy zaznaczenie ma białe tło. W przeciwnym razie będzie promień, jeśli zostanie użyty inny kolor.
MichalCh

Cześć @MichalCh, dobry chwyt! Jednym ze sposobów obejścia tego byłoby ustawienie koloru tła opakowania na tę samą wartość, co element select. Oto zmodyfikowana wersja na jsfiddle do zademonstrowania: https://jsfiddle.net/Lrqh0drd/75/
Logan Besecker,

To najczystsze rozwiązanie.
Nikolay Tsenkov

2

Możesz użyć -webkit-border-radius: 0;. Lubię to:-

-webkit-border-radius: 0;
border: 0;
outline: 1px solid grey;
outline-offset: -1px;

To da kwadratowe rogi oraz strzałki rozwijane. Używanie -webkit-appearance: none;nie jest zalecane, ponieważ spowoduje to wyłączenie wszystkich stylizacji wykonywanych przez Chrome.


ale to też jest problem; nie usuwa promienia obramowania konturu po ustawieniu ostrości.
elquimista

@elquimista możesz po prostu użyć outline: none;do tego.
gns

0

Użycie SVG z @ArnoTenkink jako adresu URL danych w połączeniu z zaakceptowaną odpowiedzią daje nam idealne rozwiązanie dla wyświetlaczy Retina.

select.form-control:not([multiple]) {
    border-radius: 0;
    appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%20%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%20%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2214px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2014%2012%22%20enable-background%3D%22new%200%200%2014%2012%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpolygon%20points%3D%223.862%2C7.931%200%2C4.069%207.725%2C4.069%20%22/%3E%3C/svg%3E);
    padding: .5em;
    padding-right: 1.5em
}

-5

klasa nazywa się:

.form-control { border-radius: 0; }

pamiętaj, aby wstawić nadpisanie po dołączeniu bootstraps css.

Jeśli TYLKO chcesz usunąć promień na wybranych kontrolkach formularza, użyj

select.form-control { ... }

zamiast

EDYCJA: działa dla mnie na Chrome, Firefox, Opera i Safari, IE9 + (wszystkie działają na linux / safari i IE na playonlinux)


Konkretnie pokazałem w pytaniu, jak zmieniłem border-radius w kontroli formularza i to nie zadziałało ..., co skłoniło mnie do zadania pytania.
Tyler McGinnis

1
jsfiddle.net/Ut4y9/3 tutaj działa skrzypce. jeśli nadal nie działa na twoim komputerze, czy możesz określić używaną przeglądarkę? Nie mogę odtworzyć twojego problemu. przepraszam
jBear Graphics

Dziwne. Używam najnowszej wersji Chrome. Oczywiście jest to coś specyficznego dla maszyny, ponieważ oboje widzicie, jak to się zmieniło. Edytuj swoją odpowiedź, abym mógł zmienić moją negatywną opinię :)
Tyler McGinnis

Mam ten sam problem. Pomimo mojego nadpisania border-radius nadal się wyświetla. Wkurza mnie.
user1732055

Tak jest nadal w przypadku najnowszego Bootstrap 3
genkilabs
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.