Autor Zpráva
Jiri Casek
Profil
Tak jak lze nastavit změnu u odkazů, tj.
a:hover - při přejetí myší
a:active - při použití tabulátoru
Je něco i na tlačítka submit, příp. button

Mám stránky, které mají externí soubor style
při přejetí myší přes input type=submit, se změní barva tlačítka.
Kde to je v tom souboru? Nebo to čte standartní thema prohlížeče?
Jak dosáhnout změny tlačítka v reakci na tabulátor?

@CHARSET "UTF-8";

/* HTML elementy */

/*Kaskada pro green motiv*/

body {
/*background-image: url("pictures/background2.jpg");*/
background-repeat: repeat;
background-color : #CFDACE;
font-family : Nimbus Sans L, Arial, sans-serif, Helvetica;
font-size : 16px;
text-align : center;
color : #0B340D;
}


h1 {
font-size: 18pt;
font-weight: bold;
margin: 0;
}

h2 {
font-size: 16pt;
font-weight: bold;
margin: 0;
text-decoration: underline;
}


img {
border: 0px;
}

img.galerie {
border: 1px solid black;
}


hr {
height: 1px;
background-color: black;
color: #0B340D;
border: 0;
}

pre {
font-size: 85%;
color: #803300;
}

.stred {
text-align: center;
}
/* Odkazy */

a:link, a:visited {
color: #657C24;
text-decoration: none;
}

a:hover {
color: #3771C8;
text-decoration: none;
font-weight: bold;
}

a.links:link, a.links:visited {
color: #657C24;
text-decoration: none;
font-weight: bold;
}

a.links:hover {
color: #0080D2;
font-weight: bold;
}

/* Zarovnání celé stránky */

#telo {
width: 950px;
border: 1px solid black;
padding: 10px 10px 10px 10px;
margin: auto;
text-align: left;
background-color: #CFDACE;
}

/* Hlavička - Logo */

.logo {
border: 0px solid black;
height: 150px;
width: 950px;
background-image: url(pictures/green/logo_big_03.png);
background-repeat: no-repeat;
}

.lang_cze {
float: right;
position: relative;
right: 10px;
top: 136px;
border: 0px solid black;
height: 11px;
width: 13px;
background-image: url(pictures/flag_cze.png);
background-repeat: no-repeat;
}

.lang_eng {
position: relative;
top: 136px;
right: 10px;
margin-left: 10px;
float: right;
border: 0px solid black;
height: 11px;
width: 13px;
background-image: url(pictures/flag_eng.png);
background-repeat: no-repeat;
}



/* Levé menu */

.leftbox {
width: 160px;
float: left;
margin: 0;
height: 100%;
}

.menubox {
display: block;
border: 0px solid black;
background-image: url(pictures/green/inpic.png);
background-repeat: no-repeat;
width: 160px;
height: 32px;
vertical-align: middle;
padding: 10px 0px 0px 0px;
color: #222B00;
font-weight: bold;
font-size : 16px;
white-space: nowrap;
text-align: center;
/*border: 0px solid black;*/
}

/* --------------------- MENU ------------------------------------ */
a.leftmenu_uvod:link, a.leftmenu_uvod:visited {
display: block;
background-image: url(pictures/green/ico_uvod_gr_black.png);
background-repeat: no-repeat;
background-position: 5px 5px;
padding: 1px 20px 1px 25px;
border: 2px solid #d9e2d7;
border-top: 0px;
border-left: 0px;
border-right: 0px;
/*border-left: 1px solid black;
border-right: 1px solid black;*/
color: #0B340D;
text-decoration: none;
font-weight: bold;
background-color: #9FB69C;
font-size: 18px;
vertical-align: middle;
}

a.leftmenu_uvod:hover {
background-color: #cfdf9d;
background-image: url(pictures/green/ico_uvod_gr_blue.png);
border: 2px solid #d9e2d7;
border-top: 0px;
border-left: 0px;
border-right: 0px;
color: #008080;
font-weight: bold;
}

a.leftmenu_linux:link, a.leftmenu_linux:visited {
display: block;
background-image: url(pictures/green/ico_linux_gr_black.png);
background-repeat: no-repeat;
background-position: 5px 5px;
padding: 1px 20px 1px 25px;
border: 2px solid #d9e2d7;
border-top: 0px;
border-left: 0px;
border-right: 0px;
color: #0B340D;
text-decoration: none;
font-weight: bold;
background-color: #9FB69C;
font-size: 18px;
vertical-align: middle;
}

a.leftmenu_linux:hover {
background-color: #cfdf9d;
background-image: url(pictures/green/ico_linux_gr_blue.png);
/*border-left: 1px solid black;
border-right: 1px solid black;
color: red;*/
border: 2px solid #d9e2d7;
border-top: 0px;
border-left: 0px;
border-right: 0px;
color: #008080;
font-weight: bold;
}

a.leftmenu_blender:link, a.leftmenu_blender:visited {
display: block;
background-image: url(pictures/green/ico_blend_gr_black.png);
background-repeat: no-repeat;
background-position: 5px 5px;
padding: 1px 20px 1px 25px;
border: 2px solid #d9e2d7;
border-top: 0px;
border-left: 0px;
border-right: 0px;
color: #0B340D;
text-decoration: none;
font-weight: bold;
background-color: #9FB69C;
font-size: 18px;
vertical-align: middle;
}

a.leftmenu_blender:hover {
background-color: #cfdf9d;
background-image: url(pictures/green/ico_blend_gr_blue.png);
border: 2px solid #d9e2d7;
border-top: 0px;
border-left: 0px;
border-right: 0px;
color: #008080;
font-weight: bold;
}
a.leftmenu_software:link, a.leftmenu_software:visited {
display: block;
background-image: url(pictures/green/ico_soft_gr_black.png);
background-repeat: no-repeat;
background-position: 5px 5px;
padding: 1px 20px 1px 25px;
border: 2px solid #d9e2d7;
border-top: 0px;
border-left: 0px;
border-right: 0px;
color: #0B340D;
text-decoration: none;
font-weight: bold;
background-color: #9FB69C;
font-size: 18px;
vertical-align: middle;
}

a.leftmenu_software:hover {
background-color: #cfdf9d;
background-image: url(pictures/green/ico_soft_gr_blue.png);
border: 2px solid #d9e2d7;
border-top: 0px;
border-left: 0px;
border-right: 0px;
color: #008080;
font-weight: bold;
}

a.leftmenu_downloads:link, a.leftmenu_downloads:visited {
display: block;
background-image: url(pictures/green/ico_downloads_gr_black.png);
background-repeat: no-repeat;
background-position: 5px 5px;
padding: 1px 20px 1px 25px;
border: 2px solid #d9e2d7;
border-top: 0px;
border-left: 0px;
border-right: 0px;
color: #0B340D;
text-decoration: none;
font-weight: bold;
background-color: #9FB69C;
font-size: 18px;
vertical-align: middle;
}

a.leftmenu_downloads:hover {
background-color: #cfdf9d;
background-image: url(pictures/green/ico_downloads_gr_blue.png);
border: 2px solid #d9e2d7;
border-top: 0px;
border-left: 0px;
border-right: 0px;
color: #008080;
font-weight: bold;
}

a.leftmenu_odkazy:link, a.leftmenu_odkazy:visited {
display: block;
background-image: url(pictures/green/ico_odkaz_gr_black.png);
background-repeat: no-repeat;
background-position: 5px 5px;
padding: 1px 20px 1px 25px;
border: 2px solid #d9e2d7;
border-top: 0px;
border-left: 0px;
border-right: 0px;
color: #0B340D;
text-decoration: none;
font-weight: bold;
background-color: #9FB69C;
font-size: 18px;
vertical-align: middle;
}

a.leftmenu_odkazy:hover {
background-color: #cfdf9d;
background-image: url(pictures/green/ico_odkaz_gr_blue.png);
border: 2px solid #d9e2d7;
border-top: 0px;
border-left: 0px;
border-right: 0px;
color: #008080;
font-weight: bold;
}

a.leftmenu_guestbook:link, a.leftmenu_guestbook:visited {
display: block;
background-image: url(pictures/green/ico_guest_gr_black.png);
background-repeat: no-repeat;
background-position: 5px 5px;
padding: 1px 20px 1px 25px;
border: 2px solid #d9e2d7;
border-top: 0px;
border-left: 0px;
border-right: 0px;
color: #0B340D;
text-decoration: none;
font-weight: bold;
background-color: #9FB69C;
font-size: 18px;
vertical-align: middle;
}

a.leftmenu_guestbook:hover {
background-color: #cfdf9d;
background-image: url(pictures/green/ico_guest_gr_blue.png);
border: 2px solid #d9e2d7;
border-top: 0px;
border-left: 0px;
border-right: 0px;
color: #008080;
font-weight: bold;
}

a.leftmenu_secured:link, a.leftmenu_secured:visited {
display: block;
padding: 1px 20px 1px 25px;
border: 2px solid #d9e2d7;
border-top: 0px;
border-left: 0px;
border-right: 0px;
color: #0B340D;
text-decoration: none;
font-weight: bold;
background-color: #9FB69C;
font-size: 18px;
vertical-align: middle;
}

a.leftmenu_secured:hover {
background-color: #cfdf9d;
border: 2px solid #d9e2d7;
border-top: 0px;
border-left: 0px;
border-right: 0px;
color: #008080;
font-weight: bold;
}


/* --------------------------------------------------------------- */

.infoboxlogo {
display: block;
border: 0px solid black;
background-image: url(pictures/green/inpic.png);
background-repeat: no-repeat;
width: 160px;
height: 32px;
vertical-align: middle;
padding: 10px 0px 0px 0px;
color: #222B00;
font-weight: bold;
font-size : 16px;
white-space: nowrap;
text-align: center;
}

.infobox {
display: block;
background-color: #9FB69C;
color: #0B340D;
font-size: 75%;
padding: 0px 3px 10px 3px;
border: 2px solid #d9e2d7;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}

.setupboxlogo {
display: block;
border: 0px solid black;
background-image: ur
MCKAY
Profil
Hele, toho kódu je tam strašně moc, jestli ti jde ale o to, jak to vyřešit, tak si prostě na konec externího stylu připiš
input[type="button"]:hover, input[type="submit"]:hover{
 background: #2f97ff;
 } 


Kde v background: #2f97ff; uvedeš libovolnou barvu. V případě, že ti to nebude fungovat, připiš si tam za to !important. Sice je to prasárna ale v celém tom bloku kódu jsem ten button nebo submit nenašel. Možná je to tím, že diskuse povolí pouze omezené množství textu. To by vysvětlovalo, proč máš ten kód na konci uříznutý.
Str4wberry
Profil
Reakce na Jiriho Caska:
při přejetí myší přes input type=submit, se změní barva tlačítka
To v uvedeném stylu nevidím.

Jak dosáhnout změny tlačítka v reakci na tabulátor?
Pomocí :active/:focus.
habendorf
Profil
OT - ten kód je příšernej. Např.:

border: 2px solid #d9e2d7;
>
border-top: 0px;
>
border-left: 0px;
>
border-right: 0px;

Nebylo by snazší napsat border-bottom?
MCKAY
Profil
habendorf
Nebylo by snazší napsat border-bottom?

Dle mého nemá cenu se tím vůbec zabývat, člověk, který tohle psal, za předpokladu, že to vůbec psal, což tak docela jasně NEvyplývá z jím uvedeného textu, si to stejně s nejvyšší pravděpodobností nepřepíše, špatných zvyků se člověk zbavuje nejobtížněji.
Jiri Casek
Profil
ten kod jsem ja nepsal a skutecně tam nikde neni definováno ani button, ani input.
input:focus - bezvadně reaguje když na prvek přeskočím tabulátorem.
Akorát to nefunguje na radio a checkbox.
Přitom třeba na zaškrtnutí checkbox lze používat tab+mezerník. Ovšem vůbec není vidět, kdy tím tabulátorem na checkbox přeskočím.
Checkbox a radio nenabývají hodnotu focus?

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: