11
votes

Comment changer le style de zone de texte d'entrée en ligne?

Dans ma forme, j'ai trois champs d'entrée Nom, email, mobile mais je souhaite modifier la zone de texte d'entrée comme -

name :  _____________  
email:  _____________  
mob  :  _____________  


0 commentaires

6 Réponses :


40
votes

dans votre CSS: xxx

à partir d'ici, vous pouvez jouer avec un remplissage pour positionner l'entrée de texte réelle où vous l'aimeriez. Par exemple, pour que la ligne s'étend sur 5 pixels de chaque côté de la zone d'entrée réelle: xxx


4 commentaires

Vous devriez probablement utiliser une classe au lieu du sélecteur d'attributs pour accueillir les anciens navigateurs.


Cela fonctionnera dans IE7 +, FF2 +, Chrome, etc. Si la prise en charge de l'IE6 est nécessaire, une classe ou une autre méthode est définitivement recommandée.


Vous voudrez peut-être aussi ajouter «contour: aucun» afin que vous ne voyiez pas de contour lorsque les champs se concentrent.


Dans ce cas, vous voudrez peut-être le faire, mais s'il vous plaît, ne faites pas simplement cela. Le style de concentration est une chose très importante pour beaucoup de personnes utilisant votre site Web et cela en rend beaucoup plus facile à utiliser.



2
votes

Si vous le souhaitez aussi dans IE6 que vous pouvez utiliser une image BG pour cela avec la position d'arrière-plan

. xxx

donc pour tout support de navigateur avec IE6 vous devrait utiliser ceci.


7 commentaires

Je crois que vous voulez dire position de fond . En outre, IE6 est mort. S'il vous plaît laissez-le comme ça, pour l'amour de tout le bien du monde.


@ Matthew scharley.oh oui c'est la position de l'arrière-plan. et à propos de IE6. w3schools.com/browersers/browsers_stats.asp Vous constatez que IE6 utilisateurs Sont plus que safari et opéra.Si nous nous soucions d'eux que nous devrions aussi nous soucier de IE6.


@KC: Mais Safari et Opera augmentent soit à UserBase, soit rester statique. L'utilisation IE6 est activement abandonnée. De nombreux ISV, y compris Google, tombent à l'IE6. C'est bien et vraiment mourant, si vous ne concèdez pas que c'est mort, et il est temps.


@Matthew de ce droit, mais cette réponse est une option à utiliser. Et je pense que cela est utile au nom de Nectar. Nous pouvons utiliser cette option. Si vous ne voulez pas utiliser ceci que rien, mais comme nectar demande c'est une réponse parfaite.Si nous voulons tuer IE6 que ce n'est pas une mauvaise idée.


@KC: Pour le dossier, je ne vous ai pas indiqué, je ne fais que partager mon opinion. De plus, je suis sûr de 90% ma solution fonctionne pour IE6, le seul problème est le sélecteur. Pourrait être faux cependant.


@Matthieu. Votre réponse est correcte et que chaque développeur et chaque concepteur veulent tuer IE6, mais comme je le sais en Inde, environ 60% d'utilisateurs d'ordinateurs ont à IE6. Donc, dans mon cas, je n'ai aucune chance de tuer IE6.About my Down Vote Je ne fais pas cela.


Je suis arrivé huit ans plus tard. C'est comme le temps voyager.



0
votes

Vous souhaitez afficher uniquement la partie inférieure, c'est pourquoi appliquer CSS de manière à désactiver toutes les trois autres parties.

Appliquez CSS comme P>

border: 1px solid black;
float: left;
margin: 0;
padding: 0;
border-top: 0px;
border-left: 0px;
border-right: 0px;


0 commentaires

0
votes
border: 1px solid black;
float: left;
margin: 0;
padding: 0;
border-top: 0px;
border-left: 0px;
border-right: 0px;

0 commentaires

1
votes

Vous pouvez styler une boîte d'entrée, mais vous voulez. Vérifiez le Codepen où j'ai conçu une boîte d'entrée uniquement avec CSS.

style une boîte d'entrée avec seulement CSS p>

html - p> xxx pré>

css - p> xxx pré>

p>

<div class="input__box">
  <input type="text" placeholder="Enter Some Text Here...">
</div>


0 commentaires

0
votes

Si vous utilisez Composants de style Code> Vous pouvez effectuer ce qui suit si vous utilisez un fond blanc, que je pense qu'il existe des CSS équivalents pour faire la même chose:

const TextInput = styled.TextInput`
  width: 295px;
  height: 30px;
  border: 1px solid #dbdfea;

  border-top-color: white;
  border-left-color: white;
  border-right-color: white
 ` 


0 commentaires