de-vraag
Lebih
Question

Bagaimana saya bisa mengubah ukuran huruf dari opsi pilihan?

Saya mencoba untuk menata daftar dropdown opsi pilihan. Apakah mungkin untuk membuat ukuran font opsi berbeda dari nilai default? Misalnya, default:

-- Select Country --

Akan berukuran 7pt; dan salah satu opsi,

Georgia

Akan berukuran 13pt.

Ini adalah daftar dropdown saya:

.select_join {
  width: 170px;
  height: 28px;
  overflow: hidden;
  background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE;
  border: #FEFEFE 1px solid;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;
  box-shadow: inset 0px 0px 10px 1px #FEFEFE;
}
.select_join select {
  background: transparent;
  width: 170px;
  font-size:7pt;
  color:grey;
  border: 0;
  border-radius: 0;
  height: 28px;
  -webkit-appearance: none;
}
.select_join select:focus {
  outline: none;
}
<div style="background-color:pink;height:150px; text-align:center;">
  <br/>
  <div class="select_join" style="margin-left:15px">
    <select name="txtCountry">
      <option>-- Select Country --</option>
      <option value="1">Georgia</option>
      <option value="2">Afghanistan</option>
    </select>
  </div>
</div>

Lihat juga demo di JSFiddle.

Sayangnya, ini hanya berfungsi di Firefox. Mungkinkah browser lain tidak mendukung styling elemen <option>?

Browser yang saya uji:

  • Chrome: Versi 27.0.1453.116 m
  • IE: 10
  • Firefox: 22.0
TylerH
TylerH
Pertanyaan edit 17 November 2017 в 10:04
Pemrograman
css3
font-size
css
html-select
Pertanyaan ini memiliki :value jawaban dalam bahasa Inggris, untuk membacanya masuk ke akun Anda.
Solution / Answer

Tambahkan kelas CSS ke tag <option> untuk menatanya:

Saat ini browser WebKit tidak mendukung perilaku ini, karena tidak ditentukan oleh spesifikasi. Lihatlah ini: [Bagaimana cara menata elemen opsi tag pilih'`?

TylerH
TylerH
Jawaban edit 17 November 2017 в 10:06
15

Beri tahu elemen opsi menjadi 13pt

select option{
    font-size: 13pt;
}

dan kemudian elemen opsi pertama menjadi 7pt

select option:first-child {
    font-size: 7pt;
}

Menjalankan demo:

4

coba ini

CSS tambahkan kode Anda

.select_join option{
    font-size:13px;
}
Falguni Panchal
Falguni Panchal
Jawaban edit 2 Juli 2013 в 8:37
-2
Related communities 5
HTML dan CSS Indonesia
4 425 pengguna
Silahkan bertanya terkait mengenai HTML maupun CSS. Membaca, menulis, berbagi. Baca dahulu pesan tersemat di pinned post.
Pemrograman Web Indonesia (HTML CSS Javascript PHP MySQL)
300 pengguna
Official Website : https://webcode.my.id Belajar Pemrograman Web (HTML CSS Javascript PHP MySQL) Grup Belajar Pemrograman Web. HTML + PHP + Javascript + MySQL DB Semoga menjadi forum belajar, menambah wawasan, peningkatan mutu personal kita semua.
HTML INDONESIA
107 pengguna
PHP HTML Indonesia
60 pengguna
~ Menerima Jasa Pembuatan Website untuk : Tugas & Instansi 💻 ~ Forum Diskusi Belajar Bersama ✅ ~ Promosi Jasa Minimal 1x Sehari ✅ ~ Dilarang Berbicara Kotor 🚫 ^ Other Grup : Whatsapp Group : Chat Admin untuk masuk ke Grup Whatsapp ^^
Css Indonesia
17 pengguna
Css Indonesia group ini membahas tentang Css dan web design Bagi yg mau memperdalam Css atau ingin memulai Css atau bahkan Javascript dan html, bisa download aplikasi di bawah ini : https://play.google.com/store/apps/details?id=com.sololearn Thank you