Pilih perubahan gaya panah

125

Saya mencoba mengganti panah pilihan dengan gambar saya sendiri. Saya termasuk seleksi dalam div dengan ukuran yang sama, saya mengatur latar belakang seleksi sebagai transparan dan saya menyertakan gambar (dengan ukuran yang sama seperti panah) di sudut kanan atas div sebagai latar belakang.

Ini hanya berfungsi di Chrome.

masukkan deskripsi gambar di sini

Bagaimana saya bisa membuatnya bekerja di Firefox dan IE9 di mana saya mendapatkan ini:

masukkan deskripsi gambar di sini

.styled-select {
  width: 100px;
  height: 17px;
  overflow: hidden;
  overflow: -moz-hidden-unscrollable;
  background: url(images/downarrow_blue.png) no-repeat right white;
  border: 2px double red;
  display: inline-block;
  position: relative;
}

.styled-select select {
  background: transparent;
  -webkit-appearance: none;
  width: 100px;
  font-size: 11px;
  border: 0;
  height: 17px;
  position: absolute;
  left: 0;
  top: 0;
}

body {
  background-color: #333333;
  color: #FFFFFF;
}

.block label {
  color: white;
}

<HTML>

<HEAD>
</HEAD>

<BODY>
  <p/>
  <form action="/prepareUpdateCategoryList.do?forwardto=search">

    <fieldset class="block" id="searchBlock">
      <p>
        <label style="width:80px">Class</label>
        <div class="styled-select">
          <select property="voucherCategoryClass">
    		<option value="0">Select </option>
    		<option value="7382">steam </option>
    	</select>
        </div>

      </p>
    </fieldset>
  </form>
</BODY>

</HTML>

Luaskan cuplikan

css select pengguna1802439
sumber

123

Sudahkah Anda mencoba sesuatu seperti ini:

.styled-select select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

Belum diuji, tetapi seharusnya berfungsi.

EDIT : Sepertinya Firefox tidak mendukung fitur ini hingga versi 35 ( baca lebih lanjut di sini )

Ada solusinya di sini , lihat di jsfiddleposting itu.

Morpheus
sumber

1

bagaimana dengan Internet Explorer?

Francisco Corrales Morales

Lihatlah solusi @Peter Drinnan untuk IE

Morpheus

Saya menemukan jawaban ini dari pertanyaan duplikat yang menunjukkan bagaimana sebenarnya menambahkan "tombol" juga, menggunakan CSS murni (tanpa pngs, jpegs, dll.) Stackoverflow.com/a/28274325/2098017

Anthony F.

Jsfiddle dari pertanyaan 'solusi' tidak lagi berfungsi.

Dragos Rizescu

Untuk bohlam pertunjukan, gunakan ini:

appearance: menulist !important;-moz-appearance: menulist !important;-webkit-appearance: menulist !important;-o-appearance: menulist !important;

mghhgm

61

Saya telah menyiapkan selectdengan panah khusus yang mirip dengan jawaban Julio, namun itu tidak memiliki lebar yang ditetapkan dan menggunakan gambar svgsebagai latar belakang. ( arrow_drop_downdari ikon material-ui)

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 5px;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  margin-right: 2rem;
  padding: 1rem;
  padding-right: 2rem;
}

Jika Anda membutuhkannya untuk juga bekerja di IE, perbarui panah svg ke base64 dan tambahkan yang berikut ini:

select::-ms-expand { display: none; }

background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);

Untuk mempermudah ukuran dan spasi panah, gunakan svg ini:

url("data:image/svg+xml,<svg width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='m0,6l12,12l12,-12l-24,0z'/><path fill='none' d='m0,0l24,0l0,24l-24,0l0,-24z'/></svg>");

Itu tidak memiliki spasi di sisi panah.

svnm
sumber

1

Anda dapat memposisikan panah lebih tepat menggunakanbackground-position: top 5px right 4px;

Koen

Di-zip:

background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') 100% 50% no-repeat transparent;

K-Gun

bolehkah saya tahu mengapa Anda menggunakan background-position-y: 5px;sebagai ganti% (mis. background-position-y: 50%;)?

Sam

45

Bekerja hanya dengan satu kelas:

select {
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 5px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    -webkit-appearance: none;
    background-position-x: 244px;
}

http://jsfiddle.net/qhCsJ/4120/

Julio Marins
sumber

1

Jawaban Anda tampaknya yang paling lurus ke depan dan hanya menggunakan css.

Austin Lovell

1

Untuk apa itu layak Anda tidak perlu mengatur lebar bidang dan dapat menggunakan% untuk posisi latar belakang juga :)

shaneonabike

2

Firefox tidak mendukung background-position-x, tetapi mendukung background-position

kriskodzi

2

Malu, jawaban ini membutuhkan banyak penyesuaian: - / Tapi ini garis awal yang bagus.

walther

1

Jika Anda tidak ingin bergantung pada pengaturan lebar untuk kontrol, tetapi masih ingin mengembalikan gambar dari sisi kanan, Anda dapat menggunakan calc: egbackground-position-x: calc( 100% - 5px );

bhu Boue vidya

29

Berikut ini perbaikan elegan yang menggunakan rentang untuk menunjukkan nilainya.

Tata letaknya seperti ini:

<div class="selectDiv">
   <span class="selectDefault"></span>
   <select name="txtCountry" class="selectBox">
      <option class="defualt-text">-- Select Country --</option>
      <option value="1">Abkhazia</option>
      <option value="2">Afghanistan</option>
   </select>
</div>

JsFiddle

Peter Drinnan
sumber

5

+1 untuk solusi ini, ini adalah satu-satunya cara yang saya temukan untuk memberi gaya panah dengan benar di IE9 dan browser yang lebih lama. Ada banyak situs yang hanya mengatakan Anda tidak dapat mengatur gaya kotak pilih di IE9 dan sebelumnya, dan sebagai gantinya menawarkan strategi fallback, tetapi solusi ini membuktikan sebaliknya.

Jon

Terima kasih, ini sangat berguna.

Penyiksaan Parah

3

Perlu disebutkan: solusi ini membutuhkan javascript , yang jawaban ini tidak diberi tag .

random_user_name

21

Ini akan bekerja dengan baik terutama bagi mereka yang menggunakan Bootstrap, diuji dalam versi browser terbaru:

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Some browsers will not display the caret when using calc, so we put the fallback first */ 
  background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */
  background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */
}
/*For IE*/
select::-ms-expand { display: none; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <select class="form-control">
       <option>Option 1</option>
       <option>Option 2</option>
       <option>Option 3</option>
      </select>
    </div>
  </div>
</div>

Luaskan cuplikan

Siavas
sumber

9

Periksa yang ini Ini hacky, sesederhana itu:

Setel -prefix-appearanceuntuk nonemenghapus gaya
Menggunakan text-indent untuk "mendorong" konten sedikit ke kanan
Terakhir, setel text-overflowke string kosong. Segala sesuatu yang melampaui lebarnya akan menjadi ... tidak ada! Dan itu termasuk panahnya.

Sekarang Anda bebas menatanya sesuka Anda :)

.selectParent {
  width: 80px;
  overflow: hidden;
}

.selectParent select {
  text-indent: 1px;
  text-overflow: '';
  width: 100px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 2px 2px 2px 2px;
  border: none;
  background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat 60px center;
}

<div class="selectParent">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
</div>

Luaskan cuplikan

Lihat di JSFiddle

sunilkjt.dll
sumber

6

Ini berfungsi di semua browser:

select {
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 5px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    appearance:none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    background-position-x: 244px;

}

kishan Radadiya
sumber

9

Anda tidak menganggap IE sebagai browser. Saya tidak akan meremehkan Anda untuk itu.

pengguna1566694

5

Beri gaya label dengan CSS dan gunakan peristiwa pointer:

<label>
<select>
   <option value="0">Zero</option>
   <option value="1">One</option>
</select>
</label>

dan CSS relatifnya adalah

label:after {
    content:'\25BC';
    display:inline-block;
    color:#000;
    background-color:#fff;
    margin-left:-17px;   /* remove the damn :after space */
    pointer-events:none; /* let the click pass trough */
}

Saya baru saja menggunakan panah bawah di sini, tetapi Anda dapat mengatur blok dengan gambar latar belakang. Berikut ini contoh biola jelek: https://jsfiddle.net/1rofzz89/

Dario Corno
sumber

1

Saya merujuk posting ini , itu bekerja seperti pesona, kecuali itu tidak menyembunyikan panah di browser IE.

Namun menambahkan yang berikut menyembunyikan panah di IE:

&::-ms-expand {
      display: none;
    }

Luaskan cuplikan

Solusi lengkap (sass)

$select-border-color: #ccc;
$select-focus-color: green;

select {

    cursor: pointer;
    /* styling */
    background-color: white;
    border: 1px solid $select-border-color;
    border-radius: 4px;
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    padding: 0.5em 3.5em 0.5em 1em;

    /* reset */
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: linear-gradient(45deg, transparent 50%, $select-border-color 50%),
    linear-gradient(135deg, $select-border-color 50%, transparent 50%),
    linear-gradient(to right, $select-border-color, $select-border-color);
    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;

    /* Very imp: hide arrow in IE */
    &::-ms-expand {
      display: none;
    }

    &:-moz-focusring {
      color: transparent;
      text-shadow: none;
    }

    &:focus {
      background-image: linear-gradient(45deg, $select-focus-color 50%, transparent 50%),
      linear-gradient(135deg, transparent 50%, $select-focus-color 50%), linear-gradient(to right, $select-focus-color, $select-focus-color);
      background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - 2.5em) 0.5em;
      background-size: 5px 5px, 5px 5px, 1px 1.5em;
      background-repeat: no-repeat;
      border-color: $select-focus-color;
      outline: 0;
    }
  }

Luaskan cuplikan

Maverick09
sumber

-1

Asumsikan, selectDrop adalah kelas yang ada di tag HTML Anda. Jadi, banyak kode ini cukup untuk mengubah ikon panah default:

.selectDrop{
      background: url(../images/icn-down-arrow-light.png) no-repeat right #ddd; /*To change default icon with provided image*/
      -webkit-appearance:none; /*For hiding default pointer of drop-down on Chrome*/
      -moz-appearance:none; /*For hiding default pointer of drop-down on Mozilla*/
      background-position-x: 90%; /*Adjust according to width of dropdown*/
    }

AdroitSJ
sumber

Pilih perubahan gaya panah

Jawaban: