kzen.dev
  • Otázky
  • Štítky
  • Uživatelé
Oznámení
Odměny
Registrace
Po registraci budete informováni o odpovědích a komentářích na vaše otázky.
Přihlášení
Pokud již máte účet, přihlaste se a zkontrolujte nová oznámení.
Za přidané otázky, odpovědi a komentáře budou vypsány odměny.
Více na
Zdroj
Upravit
Jitendra Vyas
Jitendra Vyas
Otázka

Jak nastylovat rozbalovací okno <select> pouze pomocí CSS?

Existuje způsob, jak nastylovat rozbalovací okno <select> pouze pomocí CSS?

Potřebuji nastylovat formulář <select> tak, jak je to jen v lidských silách, bez JavaScriptu. Jaké vlastnosti k tomu mohu použít v CSS?

Tento kód musí být kompatibilní se všemi hlavními prohlížeči:

  • Internet Explorer 6, 7 a 8
  • Firefox
  • Safari

Vím, že to zvládnu pomocí JavaScriptu: Příklad.

A to nemluvím o jednoduchém stylování. Chci vědět, co nejlépe můžeme udělat pouze s CSS.

Našel jsem podobné otázky na Stack Overflow.

A tento na Doctype.com.

1247 2009-12-13T03:33:56+00:00 3
Peter Mortensen
Peter Mortensen
Upravená otázka 7 září 2019 в 7:15
Programování
cross-browser
html
css
combobox
skinning
Oblíbená videa
How To Get Selected Option Value From Drop Down List Using JavaScript [ with source code ]
How To Get Selected Option Value From Drop Down List Using JavaScript [ with source code ]
před 5 lety
A Custom Select Box Using HTML &amp; CSS
A Custom Select Box Using HTML & CSS
před 3 roky
Custom select menu - CSS only
Custom select menu - CSS only
před 2 roky
How to Create Simple Popup Box / Modal using HTML CSS &amp; JavaScript
How to Create Simple Popup Box / Modal using HTML CSS & JavaScript
před 2 roky
Create a Modal (Popup) with HTML/CSS and JavaScript
Create a Modal (Popup) with HTML/CSS and JavaScript
před 2 roky
Select com IF
Select com IF
před 2 roky
6 select atributos avanzados CSS
6 select atributos avanzados CSS
před 8 lety
CO JE LEPŠÍ POUŽÍVAT???
CO JE LEPŠÍ POUŽÍVAT???
před 1 rokem
Attribute Selectors in CSS | Part - 32 | CSS in Hindi
Attribute Selectors in CSS | Part - 32 | CSS in Hindi
před 3 roky
SQL 12: MySQL SELECT, stránkovanie, limity, štatistické funkcie
SQL 12: MySQL SELECT, stránkovanie, limity, štatistické funkcie
před 5 lety
PHP Dynamic Select/Option From MySQL Table
PHP Dynamic Select/Option From MySQL Table
před 5 lety
Sql Server Dersleri - Ders 4 - Select Komutu - www.ozcantoy.com
Sql Server Dersleri - Ders 4 - Select Komutu - www.ozcantoy.com
před 5 lety
Chapter 2 - Select Queries Part 2
Chapter 2 - Select Queries Part 2
před 7 lety
Altsorgular İç İçe Select
Altsorgular İç İçe Select
před 5 lety
C# - Realizando SELECT!
C# - Realizando SELECT!
před 2 roky
14 - MS SQL Server Select Statement Part 3
14 - MS SQL Server Select Statement Part 3
před 4 roky
#php #Mysql #HTML #CSS #Jquery #Javascript Php/mysql/html/Login validation with JavaScript and php
#php #Mysql #HTML #CSS #Jquery #Javascript Php/mysql/html/Login validation with JavaScript and php
před 3 roky
Javascript Form Select Change Options Tutorial Dynamic List Elements HTML5
Javascript Form Select Change Options Tutorial Dynamic List Elements HTML5
před 10 lety
Create a Simple Popup Modal
Create a Simple Popup Modal
před 4 roky
INSERT DELETE EDIT UPDATE SELECT DATA PHP SQL HTML CSS DATABASE TUTORIAL
INSERT DELETE EDIT UPDATE SELECT DATA PHP SQL HTML CSS DATABASE TUTORIAL
před 5 lety
How to Change Background Color with select
How to Change Background Color with select
před 4 roky
SQL Complete Course  | 28 - SQL SELECT INTO Statement - How to Create Copy of Your Table with Data
SQL Complete Course | 28 - SQL SELECT INTO Statement - How to Create Copy of Your Table with Data
před 2 roky
Dynamic Select Options Month Year Using PHP SQL
Dynamic Select Options Month Year Using PHP SQL
před 1 rokem
PHP-TUTORILAS_selectioner des donnes_SELECT FROM
PHP-TUTORILAS_selectioner des donnes_SELECT FROM
před 5 lety
Database MS SQL Select Query
Database MS SQL Select Query
před 3 roky
Select top 10 in sql | SQL Server Tutorials | SQL tutorial for beginners
Select top 10 in sql | SQL Server Tutorials | SQL tutorial for beginners
před 2 roky
WINKHAUS Skryté kování activPilot Select   Montážní instrukce do 150 kg
WINKHAUS Skryté kování activPilot Select Montážní instrukce do 150 kg
před 2 roky
« Předchozí
Další »
Tato otázka má 1 odpověď v češtině, pro jejich přečtení se přihlaste ke svému účtu.
 pavium
pavium
13 prosinec 2009 в 3:43
2009-12-13T03:43:55+00:00
Více na
Zdroj
Upravit
#9806658

Prvek select a jeho rozbalovací funkce se obtížně stylizují.

atributy stylu pro prvek select od Chrise Heilmanna potvrzuje to, co řekl Ryan Dohery v komentáři k první odpovědi:

"Prvek select je součástí operačního systému, nikoliv chrome prohlížeče. Proto je velmi nespolehlivé stylovat a nemá nutně smysl se o to pokoušet. stejně."

Jacob Alvarez
Jacob Alvarez
Upravená odpověď 20 červen 2016 в 4:41
62
0
 jeremyosborne
jeremyosborne
13 prosinec 2009 в 3:48
2009-12-13T03:48:31+00:00
Více na
Zdroj
Upravit
#9806664

Značky <select> lze stylovat pomocí CSS stejně jako jakýkoli jiný prvek HTML na stránce HTML vykreslené v prohlížeči. Níže je uveden (příliš jednoduchý) příklad, který umístí prvek select na stránku a vykreslí text možností modře.

Příklad souboru HTML (selectExample.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Select Styling</title>
  <link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="cherry">Cherry</option>
</select>
</body>
</html>

Příklad souboru CSS (selectExample.css):

/* All select elements on page */
select {
  position: relative;
}

/* Style by class. Effects the text of the contained options. */
.blueText {
  color: #0000FF;
}

/* Style by id. Effects position of the select drop down. */
#styledSelect {
  left: 100px;
}
Ali Shakiba
Ali Shakiba
Upravená odpověď 6 březen 2016 в 6:49
35
0
Dave Ward
Dave Ward
13 prosinec 2009 в 3:36
2009-12-13T03:36:41+00:00
Více na
Zdroj
Upravit
#9806640

Ano, můžete nastylovat libovolný prvek HTML podle jeho názvu tagu, například takto:

select {
  font-weight: bold;
}

Samozřejmě jej můžete také nastylovat pomocí třídy CSS, stejně jako jakýkoli jiný prvek:

<select class="important">
  <option>Important Option</option>
  <option>Another Important Option</option>
</select>

<style type="text/css">
  .important {
    font-weight: bold;
  }
</style>
Paul Sweatte
Paul Sweatte
Upravená odpověď 26 říjen 2013 в 12:31
5
0
Přidat otázku
Kategorie
Všechny
Technologie
Kultura / Rekreace
Život / Umění
Věda
Profesionální
Obchodní
Uživatelé
Všechny
Nový
Populární
1
Mansur Zakirov
Registrováno před 1 dnem
2
Тагир Мамедов
Registrováno před 3 dny
3
Алексей Толманов
Registrováno před 3 dny
4
Valeriu Vodnicear
Registrováno před 1 týdnem
5
Alex Johnson
Registrováno před 2 týdny
BG
CS
DE
EL
ES
FI
FR
ID
IT
JA
LT
NL
PL
PT
RO
RU
SL
TR
ZH
© kzen.dev 2023
Zdroj
stackoverflow.com
pod licencí :licence s přívlastkem