Comment distinguer les zones de saisie et les boutons-tutoriel CSS-php.cn

Comment distinguer les zones de saisie et les boutons

巴扎黑

Libérer： 2017-08-14 14:57:35

original

2010 Les gens l'ont consulté

Enquête technique sur la façon de distinguer si une entrée est un bouton ou une zone de texte lors de la définition des styles - supprimez le contenu de l'entrée

Lorsque vous voyez la balise html , vous verrez quoi ça me vient à l'esprit ? Une zone de texte ? Un bouton ? Un bouton radio ? Une case à cocher ? ...Oui, oui, oui, ils vont bien. Peut-être n'avez-vous pas pensé que cette petite entrée pouvait réellement créer 10 choses différentes. Voici une liste pour voir celles auxquelles vous n'avez pas pensé :
Zone de mot de passe
Bouton Soumettre
input type="radio" /> Bouton radio
Case à cocher
="file" /> Contrôle de sélection de fichier
Boîte cachée
la saisie est vraiment une bonne chose, et elle est tellement "provocatrice", mais lorsque vous essayez réellement de définir différents styles pour différents contrôles du projet, vous constaterez que la saisie peut vraiment "vous faire exploser la tête". Je ne sais pas pourquoi les entrées ont reçu autant d'identités en premier lieu, mais ses « identités multipliées » ont causé beaucoup de problèmes aux concepteurs de sites Web. Heureusement, les travailleurs sont formidables et il existe encore des moyens de résoudre le problème ~, même s'ils ont tous leurs propres défauts fatals Orz... Les méthodes de libération sont grossièrement résumées, et la liste est la suivante (je ne suis pas très talentueux , donc les erreurs et les omissions sont inévitables, j'aimerais donc demander conseil à tous les experts) :

1 Utilisez l'expression CSS pour déterminer l'expression
2 Utilisez le sélecteur de type en CSS
3. . Utilisez le script javascript pour implémenter
4 Si vous utilisez Microsoft Visual Studio Pour les projets de développement en 2005 ou les versions ultérieures, félicitations, vous pouvez également utiliser le skin.

Ce qui suit expliquera la mise en œuvre détaillée de chaque méthode ainsi que leurs avantages et inconvénients.

1 : Utilisez l'expression CSS pour juger l'expression

Référence du code d'implémentation :

doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<tête>
    <titre> diffInput2 titre>
    <méta nom="Auteur" content="JustinYoung"/>
    <méta nom="Mots clés" contenu="" />
    <méta nom="Description" contenu=""/>
    <méta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css" >
    entrée
    {
    couleur de fond : expression(this.type=="text"?'#FFC':'');
    }
    style>
tête >

<corps>
<dl>
<dt>C'est une zone de texte normale :<dd><saisie type="text" nom="">
<dt> <dd><saisie type="bouton" valeur ="je suis le bouton">
dl>
corps>
html>

Avantages : simple, léger

Inconvénients : l'expression de jugement d'expression que FireFox ne prend pas en charge. Le truc fatal c'est que vous ne pouvez en distinguer qu'un (par exemple, dans l'exemple, vous ne pouvez distinguer que la zone de texte), n'essayez pas d'en définir plusieurs, les suivants écraseront ceux du haut Orz...

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!