Menghapus sudut bulat dari elemen <select> di Chrome / Webkit

143

Lembar gaya agen-pengguna untuk Chrome memberikan radius batas 5px ke semua sudut <select>elemen. Saya sudah mencoba menyingkirkan ini dengan menerapkan radius 0px melalui stylesheet eksternal saya, juga sebaris pada elemen itu sendiri; Saya sudah mencoba keduanya border-radius:0pxdan -webkit-border-radius:0px;dan saya sudah mencoba yang lebih spesifik border-top-left-radius:0px(bersama dengan itu -webkit setara).

Tidak ada yang berfungsi.

Ketika saya memeriksa elemen dalam alat pengembang webkit, Gaya Komputer masih mencantumkan radius sebagai 5px. Tetapi jika saya mengklik panah expander di sebelahnya untuk melihat spesifiknya, bunyinya: element.style - 0px. Dan di bawahnya itu menunjukkan spesifikasi css eksternal yang saya berikan 0px, bersama dengan spesifikasi stylesheet pengguna-agen 5px. Dan keduanya yang terakhir dicoret, sebagaimana mestinya.

Ada ide?

select webkit css maxedison
sumber

Bisakah Anda juga memposting kode? Bahkan lebih baik jika Anda mempostingnya menggunakan jsfiddle.net.

ngen

1

Saya sebenarnya tidak memiliki jari-perbatasan sebagai gaya default di Chrome 10 pada Win7, mungkin ini versi atau OS lain?

Wesley Murch

Tidak ada sudut membulat di Chrome 12 pada Windows 7.

andyb

1

Seharusnya disebutkan bahwa itu ada di Mac OS X.

maxedison

244

Ini berfungsi untuk saya (gaya tampilan pertama bukan daftar dropdown):

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}

http://jsfiddle.net/fMuPt/

antonj
sumber

179

Adakah cara untuk menghapus sudut-sudut yang membulat tetapi tetap panah di sebelah kanan?

Adam

3

Anda perlu menambahkan panah misalnya sebagai gambar latar belakang dengan posisi 100% 50% dan atribut tanpa-pengulangan. Saya juga menggunakan gambar yang disandikan base64 di css untuk menghindari permintaan http tambahan.

Karl Adler

26

@Adam Ini bekerja untuk saya jika Anda menggunakan border: 0dan menambahkan garis besar seperti:outline: 1px inset black; outline-offset:-1px

Filipe Pereira

1

@FilipePereira Bagus Saya menyukainya, meskipun saya harus menambahkan bahwa outline-offset tidak didukung oleh IE.

Tim

6

Ini menghilangkan panah di sebelah kanan, yang secara tidak dapat diterima merusak pengalaman pengguna. Sebagai gantinya, beri style pada dropdown background-color: #yourbgdan border-style: nonekemudian buat div langsung sebelum dropdown dengan position: absolutedan border-bottom: 1px solid #youpickdan display: inline. Panah diawetkan, tidak terluka, perbaikan lebih baik.

devigner

90

Hanya solusi saya dengan gambar dropdown (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='%23444' 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;
}

Saya menggunakan bootstrap itu sebabnya saya menggunakan select.form-control
Anda dapat menggunakan select{atau select.your-custom-class{sebagai gantinya.

Afzal Hossain
sumber

4

Ini adalah satu-satunya jawaban yang memecahkan masalah saya, meskipun berhati-hati dalam menggunakan background vs background-image karena warna isian svg akan menimpa warna latar belakang apa pun yang telah Anda tetapkan untuk input Anda.

Lucas M

Setuju, Harap pilih jawaban ini! Saya tidak mengerti suara yang lain tentang jawaban yang tidak lengkap. Adakah saran untuk menggunakan ikon fontawesome alih-alih inline svg?

Nicolas Thery

FontAwesome adalah kumpulan ikon tetapi Anda hanya perlu satu ikon. Jadi, Anda perlu mengekstrak salah satu ikon FA menggunakan beberapa alat seperti icomoon.io Setelah itu ekspor ikon itu sebagai file svg atau png dan menautkannya dari css Anda

Afzal Hossain

Solusi yang bagus, tetapi dalam situasi saya saya menambahkan warna latar: putih;

Viktor Bogutskii

Namun perlu diperhatikan, saat Anda mengatur width: auto;, panah svg yang ditambahkan menindih konten yang dipilih. Ini membutuhkan bantalan tambahan di sisi kanan 16px. Namun lapisan ini terlihat di semua browser, melanggar desain di browser lain. Saya belum punya solusi untuk itu ...

Klaas van der Weij

31

Jika Anda ingin batas persegi dan masih ingin panah kecil expander, saya merekomendasikan ini:

select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}

jordan314
sumber

2

Masalah dengan hal ini adalah bahwa Anda akan menimpa default outlinepada :focus. Jika Anda akan menggunakan jawaban ini, Anda harus mengubah select:focusgaya Anda untuk secara visual menunjukkan bahwa selectelemen menjadi aktif, atau :focused, pada klik.

Devin McInnis

@ jordan314 Lihatlah sudut-sudut bulat pada foto ini . Batas-radius: 0; tidak berpengaruh pada tag pilih. Setidaknya di Chrome OSX.

Jammer

1

@ 7immy itu aneh, saya juga di Chrome OS X dan di sini adalah screenshot dari biola di atas imgur.com/r6ce6Yv

jordan314

1

@ jordan314 Bagaimana dengan ini? jsfiddle.net/78xa6qud/2 . Saya kira kita bisa lolos dengan itu jika latar belakang dan latar belakang pilih adalah warna yang sama.

Jammer

@ 7 ya ah, saya kira itu peringatan.

jordan314

7

Beberapa solusi bagus di sini, tetapi yang ini tidak memerlukan SVG, mempertahankan perbatasan melalui outlinedan menetapkannya rata pada tombol.

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>

Luaskan cuplikan

aleemb
sumber

6

Sementara jawaban teratas menghilangkan batas, itu juga menghilangkan panah yang membuatnya sangat sulit jika bukan tidak mungkin bagi pengguna untuk mengidentifikasi elemen sebagai pilih.

Solusi saya adalah hanya menempelkan div putih (dengan batas-radius: 0px) di belakang pilih. Atur posisinya menjadi absolut, tingginya hingga tinggi pilih, dan Anda harus baik-baik saja!

Reed Martin
sumber

4

Solusi dengan panah drop-down kanan kustom, hanya menggunakan css (tanpa gambar)

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>

Luaskan cuplikan

Mihai Crăiță
sumber

Penempatan latar belakang yang berfungsi lebih baik untuk kebutuhan saya adalah: background-position: calc(100% - 4px) center, 100% center;Ini menggerakkan panah ke tengah pilih dan terus ke kanan. Terima kasih banyak untuk awal yang bagus!

Brandon

3

Salah satu cara untuk membuatnya tetap sederhana dan menghindari mengacaukan panah dan fitur lainnya adalah dengan menempatkannya dalam div dengan warna latar yang sama dengan tag pilihan.

Danny Santos
sumber

1

Saya setuju, ini adalah solusi yang paling sederhana dan paling dapat diandalkan dan portabel.

John Henckel

1

Menghilangkan panah harus dihindari. Solusi yang mempertahankan panah dropdown adalah dengan terlebih dahulu menghapus gaya dari dropdown:

.myDropdown {
  background-color: #yourbg;
  border-style: none;
}

Kemudian buat div secara langsung sebelum dropdown di HTML Anda:

<div class="myDiv"></div>
<select class="myDropdown...">...</select>

Dan gaya div seperti ini:

.myDiv {
  background-color: #yourbg;
  border-style: none;
  position: absolute;
  display: inline;
  border: 1px solid #acolor;
}

Tampilan sebaris akan menjaga div dari pergi ke baris baru, posisi absolut menghapusnya dari aliran halaman. Hasil akhirnya adalah garis bawah bersih yang bagus yang bisa Anda gaya sesuai keinginan, dan dropdown Anda tetap berlaku seperti yang diharapkan pengguna.

devigner
sumber

1

Kotak-bayangan inset melakukan trik.

select{
  -webkit-appearance: none;
  box-shadow: inset 0px 0px 0px 4px;
  border-radius: 0px;
  border: none;
  padding:20px 150px 20px 10px;
}

Demo

Marco Allori
sumber

0

Untuk beberapa alasan itu sebenarnya dipengaruhi oleh warna perbatasan ??? Saat Anda menggunakan warna standar, sudut tetap bulat, tetapi jika Anda mengubah warna sedikit saja pembulatannya hilang.

select.regularcolor {
    border-color: rgb(169, 169, 169);
}

select.offcolor {
    border-color: rgb(170, 170, 170);
}

https://jsfiddle.net/hLg70o70/2/

mcallahan
sumber

Hmm tidak yakin tentang OSX. Baru saja mencobanya lagi di Windows (Chrome Versi 45.0) dan masih berfungsi. Saya kira untuk membuat masalah ini semakin aneh, itu spesifik platform ...

mcallahan

Itu karena pengaturan batas menyebabkan browser untuk merender kotak kombo itu sendiri, daripada menggunakan yang mendasarinya disediakan oleh OS.

Kong

0

baik saya mendapat solusinya. semoga dapat membantu Anda :)

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>

Luaskan cuplikan

Amit
sumber

0

Mengikuti adalah cara untuk melakukannya;

Buat gambar latar belakang yang terlihat seperti dropdown.
Nonaktifkan tampilan browser
Sejajarkan gambar latar belakang pada komponen yang dipilih

  .control select {  
    border-radius: 0px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("<your image>");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 20px;
  }

Jerome Anthony
sumber

-1

Saya menggunakan solusi jordan314, tetapi kemudian saya menambahkan kelas "border-light" untuk memilih. Jika Anda memiliki kelas border-light default yang didefinisikan dalam css, Anda dapat langsung menggunakannya. Ini hanya mendefinisikan perbatasan sebagai putih). Saya mengubah batas menjadi kuadrat / menghapus jari-jari, dan mempertahankan panah.

Inilah yang saya lakukan:

<select class="form-control border border-light" id="type">
   <option>Select</option>
   <option value="mobile">Apple</option>
 </select>

jika Anda tidak memiliki lampu border yang telah ditentukan, cukup tambahkan css Anda:

<style>
.border-light{
         border-color:#f8f9fa!important
     }

 #type {
   border:0;
   outline:1px solid #ddd;
   background-color:white;
 }
</style>

Sitti Munirah Abdul Razak
sumber

-8

firefox: 18

.squaredcorners {
    -moz-appearance: none;
}

david forstner
sumber

Pertanyaan tentang Chrome / Webkit.

zishe

-10

Atur CSS sebagai

border-radius:0px !important
-webkit-border-radius:0px !important
border-top-left-radius:0px !important

Coba jika berhasil.

AbhiRoczz ...
sumber

Menghapus sudut bulat dari elemen <select> di Chrome / Webkit

Jawaban: