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 6 lety
A Custom Select Box Using HTML &amp; CSS
A Custom Select Box Using HTML & CSS
před 4 roky
Custom select menu - CSS only
Custom select menu - CSS only
před 3 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 3 roky
Create a Modal (Popup) with HTML/CSS and JavaScript
Create a Modal (Popup) with HTML/CSS and JavaScript
před 3 roky
Select com IF
Select com IF
před 3 roky
6 select atributos avanzados CSS
6 select atributos avanzados CSS
před 9 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 4 roky
SQL 12: MySQL SELECT, stránkovanie, limity, štatistické funkcie
SQL 12: MySQL SELECT, stránkovanie, limity, štatistické funkcie
před 6 lety
PHP Dynamic Select/Option From MySQL Table
PHP Dynamic Select/Option From MySQL Table
před 6 lety
Sql Server Dersleri - Ders 4 - Select Komutu - www.ozcantoy.com
Sql Server Dersleri - Ders 4 - Select Komutu - www.ozcantoy.com
před 6 lety
Chapter 2 - Select Queries Part 2
Chapter 2 - Select Queries Part 2
před 8 lety
Altsorgular İç İçe Select
Altsorgular İç İçe Select
před 6 lety
C# - Realizando SELECT!
C# - Realizando SELECT!
před 3 roky
14 - MS SQL Server Select Statement Part 3
14 - MS SQL Server Select Statement Part 3
před 5 lety
#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 4 roky
Javascript Form Select Change Options Tutorial Dynamic List Elements HTML5
Javascript Form Select Change Options Tutorial Dynamic List Elements HTML5
před 11 lety
Create a Simple Popup Modal
Create a Simple Popup Modal
před 5 lety
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 6 lety
How to Change Background Color with select
How to Change Background Color with select
před 5 lety
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 3 roky
Dynamic Select Options Month Year Using PHP SQL
Dynamic Select Options Month Year Using PHP SQL
před 2 roky
PHP-TUTORILAS_selectioner des donnes_SELECT FROM
PHP-TUTORILAS_selectioner des donnes_SELECT FROM
před 6 lety
Database MS SQL Select Query
Database MS SQL Select Query
před 4 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 3 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 3 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
Do you have a question? Add it on the site and get an answer instantly
en.kzen.dev
 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
Do you have a question? Add it on the site and get an answer instantly
en.kzen.dev
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
Александр Македонский
Registrováno před 5 dny
2
Andrei Kalinin
Registrováno před 3 týdny
3
Koroleva Ego
Registrováno před 1 měsícem
4
Star Lenon
Registrováno před 1 měsícem
5
Данил Жевнеров
Registrováno před 1 měsícem
Do you have a question? Add it on the site and get an answer instantly
en.kzen.dev
BG
CS
DE
EL
ES
FI
FR
ID
IT
JA
LT
NL
NO
PL
PT
RO
RU
SL
TR
ZH
© kzen.dev 2023
Zdroj
stackoverflow.com
pod licencí :licence s přívlastkem