Création d'un élément d'entrée avec une bordure en pointillés

Je souhaite placer un élément d'entrée dans un formulaire. Cependant, au lieu d'avoir une bordure en boîte pleine, je veux qu'il y ait une bordure en pointillés.Création d'un élément d'entrée avec une bordure en pointillés

Ceci est similaire à ce que Basecamp a pour inviter de nouvelles personnes à des projets existants.

Des idées pour faire cela?

Source

2012-12-26 murtaza52

Il est généralement utile d'ajouter un lien de référence ou un instantané lorsque vous faites référence à quelque chose. Par exemple, je n'ai aucune idée de ce qu'est le camp de base et comment il invite les gens. –

Le remodelage drastique des éléments de forme est vraiment mauvais pour la facilité d'utilisation. Les utilisateurs ont certaines attentes en ce qui concerne l'aspect général des composants de formulaire. – cimmanon

C'est le code que je suis venu avec:

HTML

<input type="text" id="dotted">

CSS

#dotted { 
    border:0; 
    border-bottom: 2px dotted; 
}

Voici un jsfiddle.

Source

2012-12-26 04:16:39 Cdeez

Je n'arrive pas à faire fonctionner le style ci-dessus. J'utilise Twitter bootstrap, cela pourrait-il remplacer les styles que vous avez fournis ci-dessus? – murtaza52

Il est probable qu'ils l'utiliseraient sur plusieurs champs de saisie, donc une classe me conviendrait mieux qu'un ID. –

Oui il peut y avoir un problème de "CSS specificity" là. Trouvez-vous le css ci-dessus remplacé avec css existant dans Firebug ou des outils de développement? – Cdeez

Comme ceci:

<input type="text" style="border:0;border-bottom:2px dashed #c3c3c3;padding:5px;color:gray;font-family:Arial;font-weight:bold;font-size:14px;">

Si vous voulez pas élança, et juste une ligne solide, remplacer "border-bottom: 2px en pointillés # c3c3c3;" avec "border-bottom: 2px solide # c3c3c3;". Et si vous ne le voulez pas 2px, et seulement 1px, remplacez "border-bottom: 2px dashed # c3c3c3;" avec "border-bottom: 1px pointillé # c3c3c3;". Notez également que la partie du code qui ajoute les 2 pixels de bordure en bas est "border-bottom: 2px dashed # c3c3c3". Le reste du code que j'ai fait est juste pour l'embellissement.

Vous pouvez également faire référence à une feuille de style comme ceci:

<style> 
.classy{ 
border:0; 
border-bottom:2px dashed #c3c3c3; 
padding:5px; 
color:gray; 
font-family:Arial; 
font-weight:bold; 
font-size:14px; 
} 
</style>

Et pour la zone de texte, vous pouvez le faire:

<input type="text" class="classy">

Source

2012-12-26 04:02:42

Évitez d'utiliser des feuilles de style en ligne – gamehelp16

Modifié pour inclure le code d'une feuille de style externe. –

HTML:

<input type="text" class="dotted-input">

CSS:

.dotted-input { 
    border: 0px; 
    border-bottom:1px dotted #000; 
}

Source

2012-12-26 04:08:45

+1 et 500 repo! –

+1 pour la réponse – murtaza52

est ici un

<input type="text" class="dotbox">

.dotbox{ 
    border:none; 
    border-bottom:thin dashed black; 
    padding-bottom:0; 
    outline:none; 
}

DEMO

Source

2012-12-26 04:16:52 Musa

«aperçu: aucun» n'est pas une bonne idée je suppose. Voir ceci- http://outlinenone.com/ – Cdeez

+1 pour la réponse – murtaza52

Pour la bordure en pointillés autour de:

<input type="text" style="border:1px dotted #ccc">

pour la bordure en pointillé sur le côté que vous voulez:

<input type="text" style="border-<side you want either top, bottom, left, right> 1px dotted #ccc>

Source

2012-12-26 04:33:47

Création d'un élément d'entrée avec une bordure en pointillés

Répondre

Questions connexes