Retour à Forum de site web

Masquer la valeur par le biais du bouton CSS

  • kami
  • Newbie
  • Newbie
  • No Avatar
  • Inscription: Avr 03, 2007
  • Messages: 9
  • Status: Offline

Message Juin 13th, 2008, 6:38 am

Salut,

J'ai une conception de la forme dans laquelle je vais finir par utiliser une image en arrière-plan d'un bouton de soumission, qui a le texte, dans un style funky, pour le bouton. Toutefois, je ne veux pas faire de la valeur à blanc afin d'assurer une compatibilité maximale / accessibilité.

oui, est-il possible de masquer la valeur d'un bouton "envoyer" par CSS? J'ai javascript solutions, mais je tiens à le fonder en CSS.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Juin 13th, 2008, 6:38 am

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Inscription: Fév 10, 2004
  • Messages: 13455
  • Loc: Florida
  • Status: Offline

Message Juin 13th, 2008, 7:13 am

Im not sure si cela sera possible, mais essayez
Code: [ Select ]
input.your_button
{
    color: transparent;
}
  1. input.your_button
  2. {
  3.     color: transparent;
  4. }
Strong with this one, the sudo is.
  • kami
  • Newbie
  • Newbie
  • No Avatar
  • Inscription: Avr 03, 2007
  • Messages: 9
  • Status: Offline

Message Juin 13th, 2008, 8:09 am

Je n'avais pas l'aborder comme ça, mais malheureusement il ne fonctionne pas: /
  • Hob Bramble
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Jan 21, 2004
  • Messages: 351
  • Loc: Indiana, USA
  • Status: Offline

Message Juin 13th, 2008, 1:06 pm

En utilisant un ID:
Code: [ Select ]
CSS:
#prettybutton {
color:transparent;
}
 
BUTTON:
<input type="submit" value="Whatever" id="prettybutton"/>
  1. CSS:
  2. #prettybutton {
  3. color:transparent;
  4. }
  5.  
  6. BUTTON:
  7. <input type="submit" value="Whatever" id="prettybutton"/>


Utiliser une classe:
Code: [ Select ]
CSS:
.prettybutton {
color:transparent;
}

BUTTON:
<input type="submit" value="Whatever" class="prettybutton"/>
  1. CSS:
  2. .prettybutton {
  3. color:transparent;
  4. }
  6. BUTTON:
  7. <input type="submit" value="Whatever" class="prettybutton"/>

J'ai testé ces deux, et soit qu'on travaille.
-Patrick J. B. Simmons | @hobbramble
"If I could give you one piece of advice to remember for the rest of your life, it would be this: when Patrick tells you to do something, do the opposite." - Nolan Ladewski
  • kami
  • Newbie
  • Newbie
  • No Avatar
  • Inscription: Avr 03, 2007
  • Messages: 9
  • Status: Offline

Message Juin 13th, 2008, 5:34 pm

Merci pour la réponse Hob,

La couleur ne transpare solution ne fonctionne pas pour IE 6 ou Opera 9.50 bêta, ne fonctionne pas pour firefox 3 beta mais - je n'ai pas d'autres navigateurs pour tester ici, mais ce n'est pas une solution 100%.

Jusqu'à ce que je peux creuser quelque chose de mieux, j'ai décidé de s'en tenir à une valeur vide, si le client arrive avec des questions je vais devoir javascript ou quelque chose.

Il ne semble pas être une solution efficace.

Merci pour votre réponse les gars.
  • Hob Bramble
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Jan 21, 2004
  • Messages: 351
  • Loc: Indiana, USA
  • Status: Offline

Message Juin 13th, 2008, 6:35 pm

Ah - mes mauvaises. Je n'ai pas vérifié dans Opera ou Internet Explorer 6. Je viens de réaliser que ça ne fonctionne pas dans IE 8 (beta), soit.

En passant, je ne pense pas que toute solution basée sur le CSS va travailler pour IE 6. Je peux me tromper à ce sujet, bien sûr, mais assez Im certain.

EDIT: En regardant autour, je suis tombé sur ceci: http://www.ampsoft.net/webdesign-l/image-button.html
Son genre de se soustraire au problème, mais il fonctionne avec ou sans feuilles de style, et surtout son cross-browser compatible (j'ai essayé en OPers 9. 5, Internet Explorer 6, 7 et 8, Firefox 3, Safari 3 pour Windows, et Maxthon 2 sans problème).
-Patrick J. B. Simmons | @hobbramble
"If I could give you one piece of advice to remember for the rest of your life, it would be this: when Patrick tells you to do something, do the opposite." - Nolan Ladewski
  • Bogey
  • Bogey
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Juil 14, 2005
  • Messages: 8211
  • Loc: USA
  • Status: Offline

Message Juin 14th, 2008, 11:51 am

Est-ce l'image ou vous voulez juste cacher le bouton? Si oui, pourquoi ne pas utiliser quelque chose comme ça?
Code: [ Select ]
<input type="image" name="button1" value="button1" />
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • Avatar de l’utilisateur
  • Inscription: Oct 02, 2007
  • Messages: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Message Juin 18th, 2008, 3:19 pm

Je mai de la lecture de ce mal, mais il semble que vous soyez simplement de cacher le texte sur le bouton de sorte que vous voyez est le texte construit dans l'image elle-même?

Si thats le cas, le tiret, ol négatif astuce peut travailler pour vous:
Quote:
. button_image (text-indent:-9999px;)
phoenix web design
  • fyedernoggersnodden
  • Born
  • Born
  • No Avatar
  • Inscription: Juil 03, 2008
  • Messages: 2
  • Status: Offline

Message Juillet 3rd, 2008, 8:20 am

jameson5555 a écrit:
Si thats le cas, le tiret, ol négatif astuce peut travailler pour vous:
Quote:
. button_image (text-indent:-9999px;)


Lovely hack - mais IE7 croaks sur lui.

SigmaX
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • Avatar de l’utilisateur
  • Inscription: Oct 02, 2007
  • Messages: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Message Juillet 3rd, 2008, 8:38 am

Semble bien fonctionner pour moi dans IE7...
phoenix web design
  • fyedernoggersnodden
  • Born
  • Born
  • No Avatar
  • Inscription: Juil 03, 2008
  • Messages: 2
  • Status: Offline

Message Juillet 3rd, 2008, 10:34 am

jameson5555 a écrit:
Semble bien fonctionner pour moi dans IE7...


Je dois de préciser que j'ai été l'aide d'un bouton, pas une image. Si j'utilise le texte-tiret, l'ensemble du bouton est "en retrait" dans l'oubli, non seulement le texte.

Siggy
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • Avatar de l’utilisateur
  • Inscription: Oct 02, 2007
  • Messages: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Message Juillet 3rd, 2008, 11:17 am

Ah, vous avez raison .. IE7 ne semble pas que l'un comme avec des boutons. Je n'arrive pas à obtenir quelque chose à faire disparaître, soit la valeur. On dirait que vous pourriez avoir à recourir à la solution JavaScript ..
phoenix web design
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Inscription: Fév 10, 2004
  • Messages: 13455
  • Loc: Florida
  • Status: Offline

Message Juillet 3rd, 2008, 11:38 am

Et ça?

Code: [ Select ]
button
{
   background: url('...');
}
button span
{
   visibility: hidden;
}
  1. button
  2. {
  3.    background: url('...');
  4. }
  5. button span
  6. {
  7.    visibility: hidden;
  8. }


Code: [ Select ]
<button type="submit">
   <span>Submit</span>
</button>
  1. <button type="submit">
  2.    <span>Submit</span>
  3. </button>


J'aurais juré y avait quelque chose de ne pas être en mesure d'utiliser <button> la première fois que j'ai vu ce fil. :scratchhead:
Strong with this one, the sudo is.
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Juil 06, 2004
  • Messages: 1890
  • Loc: Las Vegas
  • Status: Offline

Message Juillet 3rd, 2008, 11:58 am

Vous pouvez utiliser l'opacité pour masquer le bouton et encore le rendre fonctionnel:
Code: [ Select ]
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
 
  1.     -moz-opacity:0 ;
  2.     filter:alpha(opacity: 0);
  3.     opacity: 0;
  4.  


Je l'utilise pour le style d'un bouton d'entrée de fichier et il fonctionne très bien dans IE6 +, Firefox2 +, Opera 9.5 et Safari (pour Windows) et vous pouvez voir un exemple ici:
http://www.sanityinnegation.com/test/
  • crowbar
  • Born
  • Born
  • Avatar de l’utilisateur
  • Inscription: Aoû 08, 2008
  • Messages: 1
  • Loc: California
  • Status: Offline

Message Août 8th, 2008, 12:08 pm

Hey Kami,

J'ai essayé ceci et comme par magie il a travaillé dans IE7 et IE6 et FF3. J'espère qu'elle contribue...

ps: ne fonctionnera pas si le texte est retiré de transformer...

Code: [ Select ]
 
#name
{
    color: transparent;
    text-transform: capitalize;
}
 
  1.  
  2. #name
  3. {
  4.     color: transparent;
  5.     text-transform: capitalize;
  6. }
  7.  




kami a écrit:
Salut,

J'ai une conception de formulaire dans lequel je vais finir par utiliser une image en arrière-plan d'un bouton de soumission, qui a le texte, dans un style funky, pour le bouton. Toutefois, je ne veux pas faire la valeur vide pour assurer une compatibilité maximale / accessibilité.

, est-il possible de masquer la valeur d'un bouton d'envoi par CSS? Je n'ai solutions javascript, mais je tiens à le baser en CSS.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Août 8th, 2008, 12:08 pm

1, 2

Afficher de l'information

  • Total des messages de ce sujet: 18 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 104 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC