Réduire la durée lorsque le bouton de saisie est masqué

J'ai un style qui entoure un bouton de saisie, ce qui permet de créer un style très créatif. Lorsque le bouton est caché dans .Net, je voudrais que le style s'effondre pour qu'il soit aussi caché. Ce que le style fait, en raison de l'absence de valeur dans le bouton ou son caché, c'est qu'il garde une petite forme.Réduire la durée lorsque le bouton de saisie est masqué

Cliquez pour voir une démo: http://media.apus.edu/it/evan-testing/button.htm

<style> 
.button { 
    cursor:pointer; 
    text-decoration:none; 
    background:url(button_bg.gif) no-repeat right top; 
    padding-right:10px; 
    display:inline-block; 
    line-height:29px; 
    height:29px; 
    font-size:12px; 
    color:#FFFFFF; 
    font-weight:bold; 
} 

span.button { 
    vertical-align: middle; 
} 

.button span { 
    background:url(button_bg.gif) no-repeat left top; 
    padding-left:10px; 
    line-height:20px; 
    height:29px; 
    display:inline-block; 
} 

.button span span { 
    background:transparent; 
    padding:0; 
    font-size:12px; 
} 

.button span input { 
    cursor:pointer; 
    font-weight:bold; 
    background:transparent; 
    border:0; 
    padding-top:.4em; 
    font-size:12px; 
    font-family:verdana; 
    color:#FFFFFF; 
} 

.button:hover { 
    background-position:right -39px; 
} 

.button:hover span { 
    background-position:left -39px; 
} 

.button:active { 
    background-position:right -78px; 
} 

.button:active span { 
    background-position:left -78px; 
} 
</style> 

Input button wrapped in a span with no value: 
<span class="button"><span><input type="button" value=""></span></span> 

<P> 

Input button wrapped in a span with a value: 
<span class="button"><span><input type="button" value="test"></span></span> 

<P> 

Span with no data value: 
<span class="button"><span></span>

Source

2010-05-12 Evan

Malheureusement, il n'y a aucun moyen de style d'un élément en fonction de son contenu.

Que diriez-vous coiffer l'élément <button> à la place:

<button><span><span>Test</span></span></button>

Source

2010-05-12 15:59:04 RoToRa

Je suppose que ce que je cherche est d'obtenir les côtés de la travée à rétrécir/effondrement quand il n'y a pas de données entre les portées et que lorsque des données est là en l'espace pour l'étirer à la taille appropriée. Comme vu dans ma démo, le deuxième exemple montre un style encore: http://media.apus.edu/it/evan-testing/button.htm – Evan

ce gars-là a une meilleure solution que la mienne. Je n'ai pas besoin d'utiliser "bouton" après tout, ce qui est ce que je vois tout le monde affirmant est nécessaire pour styler un bouton de formulaire. Je peux toujours utiliser "input", qui est requis pour .net, et quand le bouton est caché, le style disparaîtra de manière appropriée.

Voir la démo: http://fortysevenmedia.com/tuts/cssbuttons/

Source

2010-05-13 03:04:03 Evan

Réduire la durée lorsque le bouton de saisie est masqué

Répondre

Questions connexes