Chrome / Webkit'teki bir <select> öğesinden yuvarlak köşeleri kaldırma

143

Chrome için kullanıcı aracısı stil sayfası, bir <select>öğenin tüm köşelerine 5 piksellik kenarlık yarıçapı verir . Dış stil sayfamdan 0px yarıçapı uygulayarak ve bunun yanı sıra öğenin satır satırını da uygulayarak bundan kurtulmaya çalıştım; Her iki denedim border-radius:0pxve -webkit-border-radius:0px;ben daha da spesifik denedim border-top-left-radius:0px( 's -webkit eşdeğeri ile birlikte).

Hiçbiri çalışmıyor.

Webkit geliştirici araçlarındaki öğeyi incelediğimde, Hesaplanan Stil hala yarıçapı 5 piksel olarak listeler. Ancak özellikleri görmek için yanındaki genişletme okunu tıklarsam şu öğeyi okur: element.style - 0px. Ve bunun altında, 5px kullanıcı aracısı stil sayfası belirtimi ile birlikte 0px verdiğim harici css belirtimini gösterir. Ve bu ikisinin ikisi de olması gerektiği gibi kesişiyor.

Herhangi bir fikir?

select webkit css

— maxedison
kaynak

Kodu da gönderebilir misiniz? Daha iyi jsfiddle.net kullanarak gönderirseniz.

— ngen

1

Aslında Win7'de Chrome 10'da varsayılan stil olarak sınır yarıçapım yok, belki bu başka bir sürüm veya işletim sistemi mi?

— Wesley Murch

Windows 7'de Chrome 12'de yuvarlatılmış köşeler de yok.

— andyb

1

Mac OS X'te olduğunu belirtmeliydim.

— maxedison

244

Bu benim için çalışıyor (açılır listeyi değil, ilk görünümü biçimlendirir):

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

http://jsfiddle.net/fMuPt/

— antonj
kaynak

179

Yuvarlatılmış köşeleri çıkarmanın ancak okları sağda tutmanın herhangi bir yolu var mı?

— Adam

3

okları, örneğin% 100% 50 konumu ve tekrarsız özniteliği olan arka plan resmi olarak eklemeniz gerekir. Ayrıca ek http isteklerini önlemek için css base64 kodlu görüntü kullandım.

— Karl Adler

26

@Adam Şunun border: 0gibi bir anahat kullanır ve eklerseniz benim için çalıştı :outline: 1px inset black; outline-offset:-1px

— Filipe Pereira

1

@FilipePereira Güzel Sevdim, ancak anahat-ofset IE tarafından desteklenmiyor eklemek zorunda kalacağım.

— Tim

6

Bu, sağdaki okları ortadan kaldırır ve bu da kullanıcı deneyimine kabul edilemez şekilde zarar verir. Bunun yerine, stil açılır background-color: #yourbgve border-style: nonesonra doğrudan ile açılan önce bir div oluşturmak position: absoluteve border-bottom: 1px solid #youpickve display: inline. Oklar korunmuş, UX zarar görmemiş, daha iyi düzeltme.

— devigner

90

Açılır resimle sadece benim çözümüm (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;
}

Bootstrap kullanıyorum bu yüzden select.form-control
kullandım select{ya da kullanabilirsiniz select.your-custom-class{.

— Afzal Hoşsain
kaynak

4

Svg'nin dolgu rengi, girişiniz için ayarladığınız arka plan renginin üzerine yazacağından, arka plana karşı arka plan resmini kullanmaya dikkat etmenize rağmen, sorunumu çözen tek cevap budur.

— Lucas M

Kabul etti, Lütfen bu cevabı oyla! Eksik bir cevabın diğer oylarını anlamıyorum. Satır içi svg yerine fontawesome simgesini kullanmak için herhangi bir tavsiye?

— Nicolas Thery

FontAwesome bir simge koleksiyonudur, ancak tek bir simgeye ihtiyacınız vardır. Bu yüzden icomoon.io gibi bazı araçları kullanarak FA simgelerinden birini ayıklamanız gerekir. Bundan sonra bu simgeyi bir svg veya png dosyası olarak dışa aktarın ve css'nizden bağlayın

— Afzal Hossain

Güzel bir çözüm, ama benim durumumda arka plan rengi ekledim: beyaz;

— Viktor Bogutskii

Ancak, ayarladığınızda width: auto;, eklenen svg oku seçimin içeriğini kaplar. Bu, 16 pikselin sağ tarafına ek bir dolgu gerektirir. Ancak bu dolgu tüm tarayıcılarda görülebilir ve tasarımı diğer tarayıcılarda bozar. Bunun için henüz bir çözümüm yok ...

— Klaas van der Weij

31

Kare kenarlıklar istiyorsanız ve yine de küçük genişletici oku istiyorsanız, bunu tavsiye ederim:

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

— jordan314
kaynak

2

Bu sorun varsayılan geçersiz kılmak olacaktır outlineüzerinde :focus. Bu yanıtı kullanacağız varsa, gereken senin değiştirmek select:focusgörsel olduğunu göstermek için stil selectunsurudur aktif veya hale :focustıklamada, ed.

— Devin McInnis

@ jordan314 Bu resimdeki köşeleri yuvarlayın . Sınır yarıçapı: 0; seçim etiketi üzerinde hiçbir etkisi yoktur. En azından Chrome OSX'te zaten.

— Jammer

1

@ 7immy bu garip, ben de Chrome OS X'dayım

— jordan314 29:15

1

@ jordan314 Buna ne dersin? jsfiddle.net/78xa6qud/2 . Sanırım seçimin arka planı ve arkasındaki arka plan aynı renkteyse ondan kurtulabiliriz.

— Jammer

@ 7 ah ah evet, sanırım bu bir uyarı.

— jordan314

7

Burada bazı iyi çözümler var, ancak bu SVG'ye ihtiyaç duymuyor, sınırı koruyor outlineve düğmeye basacak şekilde ayarlıyor.

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>

Snippet'i genişlet

— aleemb
kaynak

6

Üst yanıt sınırı kaldırırken, kullanıcının öğeyi bir seçim olarak tanımlamasını imkansız olmasa bile son derece zorlaştıran oku da kaldırır.

Benim çözümüm, seçimin arkasına beyaz bir div (kenarlık yarıçapı: 0px) yapıştırmaktı. Konumunu mutlak, yüksekliğini seçimin yüksekliğine ayarlayın ve gitmek için iyi olmalısınız!

— Reed Martin
kaynak

4

Özel sağ açılır ok ile çözüm, yalnızca css kullanır (görüntü yok)

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>

Snippet'i genişlet

— Mihai Crăiță
kaynak

Gereksinimlerim için daha iyi çalışan arka plan konumlandırma şuydu: background-position: calc(100% - 4px) center, 100% center;Bu, oku seçimin ortasına ve en sağa doğru taşır. Harika bir başlangıç için çok teşekkürler!

— Brandon

3

Basit tutmanın ve oklarla ve diğer bu tür özelliklerle uğraşmaktan kaçınmanın bir yolu, onu seçme etiketi ile aynı arka plan rengine sahip bir div içine yerleştirmektir.

— Danny Santos
kaynak

1

Katılıyorum, bu en basit ve en güvenilir ve taşınabilir çözüm.

— John Henckel

1

Oklardan kaçınılmalıdır. Açılır okları koruyan bir çözüm, önce stilleri açılır menüden kaldırmaktır:

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

Ardından, HTML'nizdeki açılır menüden doğrudan div oluşturun:

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

Ve div'ı şu şekilde şekillendirin:

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

Satır içi görüntü, div öğesinin yeni bir satıra gitmesini önler; mutlak konum, sayfayı sayfa akışından kaldırır. Sonuç, istediğiniz gibi biçimlendirebileceğiniz güzel ve temiz bir alt çizgidir ve açılır listeniz hala kullanıcının beklediği gibi davranır.

— devigner
kaynak

1

İç metin kutusu-gölge hile yapar.

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

gösteri

— Marco Allori
kaynak

0

Nedense aslında sınırın renginden etkilenir ??? Standart rengi kullandığınızda köşeler yuvarlak kalır, ancak rengi biraz değiştirirseniz yuvarlama kaybolur.

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

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

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

— mcallahan
kaynak

Hmm OSX hakkında emin değilim. Sadece Windows'ta (Chrome Sürüm 45.0) tekrar denedim ve hala çalışıyor. Sorunu platforma özgü daha da garip hale getireceğim ...

— mcallahan

Bunun nedeni, kenarlığın ayarlanması tarayıcının işletim sistemi tarafından sağlanan temelini kullanmak yerine birleşik giriş kutusunun kendisini oluşturmasına neden olmasıdır.

— Kong

0

iyi bir çözüm buldum. umarım sana yardımcı olabilir :)

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>

Snippet'i genişlet

— Amit
kaynak

0

Bunu yapmanın yolu;

Açılır menü gibi görünen bir arka plan resmi oluşturun.
Tarayıcı görünümünü kapatma
Seçme bileşenindeki arka plan görüntüsünü hizalama

  .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
kaynak

-1

Jordan314'ün çözümünü kullandım, ancak daha sonra seçmek için "border-light" sınıfını ekledim. Css'de tanımlı varsayılan sınır ışığı sınıfınız varsa, doğrudan kullanabilirsiniz. Sınırı beyaz olarak tanımlar). Kenarlığı yarıçapı kare / kare olarak değiştirdim ve oku korudum.

İşte yaptığım şey:

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

önceden tanımlanmış sınır ışığına sahip değilseniz, css'nize ekleyin:

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

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

— Sitti Munirah Abdul Razak
kaynak

-8

firefox: 18

.squaredcorners {
    -moz-appearance: none;
}

— david forstner
kaynak

Chrome / Webkit ile ilgili soru.

— zishe

-10

CSS'yi şu şekilde ayarlayın:

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

Çalışıp çalışmadığını deneyin.

— AbhiRoczz ...
kaynak