css bottone

[J.Lankart]

Ciao!!
Sto formattando dei bottoni con questo css:

input.bottoni
{
border-bottom-width: 1px;
border-bottom-color: #CCCCCC;
border-bottom-style: solid;
background-color: #FFFFFF;
width: 108px;
height: 18px;
border-right-width: 1px;
border-right-color: #CCCCCC;
border-right-style: solid;
border-top-width: 1px;
border-top-color: #CCCCCC;
border-top-style: solid;
border-left-width: 1px;
border-left-color: #CCCCCC;
border-left-style: solid;
font-family: "Arial", Courier, monospace;
color: Black;
font-size: 7pt;
text-align: left;
text-decoration: none;
}

Se clicco sul pulsante ho ancora quell'effetto strano di "rientranza".....come se il bottoncino andasse in dentro e poi riuscisse. Lo posso togliere?

Ancora una cosa...........si può togliere la selezione rettangolare punteggiata che compare sul pulsante quando lo clicchi?

Grazie!!

[fcaldera]

sul secondo punto potresti provare associare all'evento onclick del bottone questo codice:

onclick = "this.blur();"

altrimenti... nada

[J.Lankart]

ok grazie!! ci provo!!

[haZe]

Per modificare l'effetto rientranza devi lavorare sul :active (e forse anche sul :focus , fai un po' di prove).

p.s.

border-right-width: 1px;
border-right-color: #CCCCCC;
border-right-style: solid;
border-top-width: 1px;
border-top-color: #CCCCCC;
border-top-style: solid;
border-left-width: 1px;
border-left-color: #CCCCCC;
border-left-style: solid; 
border-bottom-width: 1px;
border-bottom-color: #CCCCCC;
border-bottom-style: solid;

lo sai che può essere scritto come

border: 1px solid #ccc;

vero?

[J.Lankart]

ciao!!
Ho fatto un po di prove.......risultati poco convincenti però!!
Quindi al posto del bottone ho provato con una text-box in sola lettura formattata allo stesso modo.
La text-box accetta l'onClick, quindi posso tranquillamente usare un link per quello che devo fare, e così elimino sia l'effetto rientranza, sia il rettangolino punteggiato della selezione.

Adesso:
http://www.agic.it/Prova/menu.htm
Ho usato le text-box per creare i sottomenu.
Vorrei però che all'Over del mouse il sottomenu, cambiasse back-ground color e diventasse come il menu principale.

Ho incontrato queste difficoltà:
Ho due classi, quella per formattare la text-box e quella per il link.
Posso fare in modo dalla classe del link di cambiare all'hover il background-color della text-box che preparo nell'altra classe?
grazie!!

[J.Lankart]

up!!

[J.Lankart]

Risolto con un js piccolo piccolo da applicare all'onMouseOver e all'onMouseOut!!
-------------------------------------------------------------
//SWAP BACKGROUND MENU SERVIZI
function swapServizi(scelta)
{
if (scelta == "1")
{
document.getElementById('Industry').style.backgrou nd = '#CED646';
document.getElementById('Industry').style.color = '#FFFFFF';
return false;
}
if (scelta == "2")
{
document.getElementById('Competenze').style.backgr ound = '#CED646';
document.getElementById('Competenze').style.color = '#FFFFFF';
return false;
}
}
function swapServiziNeg(scelta)
{
if (scelta == "1")
{

document.getElementById('Industry').style.backgrou nd = '#FFFFFF';
document.getElementById('Industry').style.color = '#000000';
return false;
}
if (scelta == "2")
{
document.getElementById('Competenze').style.backgr ound = '#FFFFFF';
document.getElementById('Competenze').style.color = '#000000';
return false;
}
}

Sui link:
onMouseOver="swapServizi('1')" onMouseOut="swapServiziNeg('1')"