L'éditeur JavaScript
Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?
Rechercher :
Page d'accueil
     Home Page

JavaScript
     Tous les scripts
     Proposer un script
     Recherche de script
     AJAX new!
     Cours de JavaScript
     Liste de discussion
     Forums

Services :
     CountUs
     myCircle

     Referencement
     Créat. de bannière

Trucs et astuces :
     HTML / CSS
     PHP / MySQL
     Réferencement
     Graph / Présentation
     Toutes les astuces
     Ajouter un article

MailingList :
97569 abonnés

Annuaire webmaster :      Hebergement web
     Referencement
     Sites webmasters
     XHTML - CSS2
     PHP
     Affiliation - Pub
     FAI

     Annuaire webmaster

Ressources pour webmasters :
     Kits graphiques

Plus :
     Comparateur de prix
     Foire aux questions
     Les membres
     Devenir annonceur
     Faire un lien
     Contact

Partenaire :
     Hebergement gratuit
     Le PHP facile
     Horoscope
     Comscripts
     WebmasterClub
     L'écriteau
     Faro-dessing
     Activeartanima...
     Le village de ...
     Images gifs an...
     Netsources
     Easy-script.com
     Création de site
     Créer son site...
     K i s s design
     Les autres
     Votre site ici ?


Article posté par : deoxys
Date de mise en ligne : 15-03-2006
Niveau : Assez facile
>> Ajouter un article

Tansformer un champ de texte en un texte




De quoi ?

Beaucoup de personnes utilisent des input type text/textarea pour utiliser des scripts javascripts, y mettre des textes
défilants, y mettre l'heure... Cependant parfois on voudrait supprimer ce cadre type formulaire sans devoir refaire le
script.
C'est extrêmement simple en utilisant CSS !

Exemple

Nous prenons une page à laquelle nous mettons une couleur de fond spécifique. Nous y mettons un input simple.
Voici le résultat obtenu.

Code :

<input type="text" size="20" value="Sans style">


A l'affichage, on obtient un banal champ de texte au fond blanc et avec une bordure spéciale. Exemple :


Maintenant, on utilise deux coups de CSS.

Code :
<input type="text" size="80" value="Avec style" style="border-width : 0px; background-color: transparent;">


On a mis la largeur de la bordure à zéro, on a mis transparent en couleur de fond.
Le résultat est un texte normal. Résultat :


Remarque 1 : Cela s'applique aussi aux textarea !


Remarque 2 : Il s'agit toujours d'un champ de formulaire, cependant il n'y a plus que le texte. Le visiteur peut toujours séléctionner ce texte et le supprimer.



Annotations des visiteurs :

De fredo les bons tuyaux - le 27-05-2006

Pour la remarque 2, il suffit d'inserer readonly dans la balise <input et le tour est joué... :-)
De deoxys - le 05-05-2006

Note : Ne fonctionne pas sous Safari pour l'instant, qui ne gère quasiment pas les CSS sur les input. Cela devrait bientôt changer, avec la prochaine version.

>> Poster une annotation sur cette astuce

Retour à la liste des trucs et astuces





76 visiteurs
actuellement en ligne

    PUBLICITE



     ANNUAIRE WEBMAST.
Allopass
Allopass est sans conteste le numero 1 des services audiotel pour votre site en France.
http://www.allopass.com
Cat : Services audiotel
Voir l'annuaire webmaster


     LES SCRIPTS :
78 à éditer
68 à copier/coller
247 des membres
2586 sur le web
>> Tous les scripts

     LES MEMBRES :
53618 membres
9731 comptes CountUs
1357 comptes myCircle

     LES FORUMS :
14 forums
38924 topics
187799 messages
>> Les forums

    SONDAGE

Utilisez-vous une page d'accueil personnalisable ?
Oui, la page d'accueil de Google (pas le moteur)
Oui, netvibes
Oui, mon Yahoo
Oui, my MSN
Oui, un autre
Non, je n'utilise pas de service de page d'accueil personnalisée
La mini-astuce "Divers" du jour par QuentinC
Saviez-vous que vous pouvez utiliser votre navigateur comme client FTP ?
Pour cela, entrez une adresse du type :
ftp://nom_utilisateur:mot_de_passe@ftp.serveur.com
Proposer votre mini-astuce | Archives des mini-astuces
© 1999-2008 K-NETWORK - Tous droits réservés | CNIL N° 844440 | 13/05/2008 16:17:20 | Design by Studcrea | Gen. en 0.371 sec.