On m'a demandé comment personnaliser une forme graphique, en particulier une boîte de recherche comme celui sur ce blog. La technique utilisée, ou plutôt que j'utilise, est évidemment valable pour tout type de forme de module. Ce qui change est que la complexité du travail à faire en fonction de la complexité de la forme elle-même.
Les bases
Utilisation des feuilles de style que vous pouvez entièrement personnaliser la présentation de toute forme de module. Un des obstacles que vous pourriez rencontrer, comme cela arrive souvent, est sa compatibilité avec différents navigateurs sur le marché et à la fin avec des résultats différents selon le navigateur utilisé.
Pour cette raison, souvent, vous optez pour une solution sensiblement graphiques, des images qui sont exploitées pour redéfinir le tracé de la forme. Les images, en fait, sont les seules entités qui, à l'exception des cas de raï à ce jour sont toujours affichés le même sur tous les navigateurs.
Pas d'images
Avant de voir comment modifier l'agencement d'un formulaire avec les images que nous voyons ce qui "serait" peut faire avec juste CSS. Un module est constitué sous la forme de cas par les tribunaux maggiornza INPUT . Cependant ce que nous voyons est, en général, s'appliquent à toute autre forme de terrain. L'utilisation de CSS, nous pouvons redéfinir l'apparence de notre camp INPUT agissant sur sa taille, sur le bord, l'arrière-plan, la police, etc ...
Par exemple, vous pouvez améliorer les performances en mettant simplement:
1 2 3 4 5 6 | entrée { 1px solid #aaa ; border: 1px solid # AAA; 4px ; padding: 4px; 200px ; width: 200px; 12px ; font-size: 12px; } |
Mozilla Firefox et Safari vous permettent également de régler facilement la rondeur des bords (voir aussi CSS3: quelqu'un at-il vu le navigateur Internet Explorer )
1 2 3 4 5 6 7 8 | entrée { 1px solid #aaa ; border: 1px solid # AAA; 4px ; padding: 4px; 200px ; width: 200px; 12px ; font-size: 12px; ; -Moz-border-radius: 6px; ; -Webkit-border-radius: 6px; |
En outre, nous pouvons insérer une image de fond pour le rendre plus «accessible» le sens du champ lui-même:
1 2 3 4 5 6 7 8 9 10 11 | entrée { 1px solid #aaa ; border: 1px solid # AAA; 4px ; padding: 4px; 200px ; width: 200px; 12px ; font-size: 12px; ; -Moz-border-radius: 6px; ; -Webkit-border-radius: 6px; url ( images/icon.png ) no-repeat ; background: url (images / icon.png) no-repeat; 20px ; padding-left: 20px; |
permettiamo di posizionarla all'inizio del campo ma fuori dal testo. Si icon.png icône est de 16 pixels de large, à travers le padding voudrais être au début du champ mais en dehors du texte.
Les images sous la forme
Le dernier exemple vu conduirait à une solution simple quand on décide de faire le tracé de notre champ INPUT Complètement dans le graphisme. En fait, en théorie, il suffirait d'éliminer le bord du champ et d'insérer une image de fond directement dans le INPUT :
1 2 3 4 5 6 7 | entrée { none ; border: none; 4px ; padding: 4px; 200px ; width: 200px; 12px ; font-size: 12px; url ( images/custominput.png ) no-repeat ; background: url (images / custominput.png) no-repeat; |
Je dis en théorie car si cette technique fonctionne (voir Firefox), l'autre produit des effets étranges sur les autres navigateurs (Microsoft Internet Explorer).
: Pour l'espoir pour l'obstacle devient complètement transparente sur le terrain INPUT et l'image est associée à la balise directement à la FORM :
1 2 3 4 5 6 7 8 9 10 11 12 13 | entrée { none ; border: none; none ; background: none; 4px ; padding: 4px; 200px ; width: 200px; 12px ; font-size: 12px; } forme { block ; display: block; 200px ; width: 200px; 24px ; hauteur: 24px; url ( images/custominput.png ) no-repeat ; background: url (images / custominput.png) no-repeat; } |
Le tout avec un "marquage" HTML comme ceci:
1 2 3 |
Selon le choix du graphisme et de la complexité de la forme, il vous suffit de "pile" correctement, et ensuite placer, sur le terrain INPUT image comme fond de l'e-mail formulaire ci-dessous. Ceci est possible avec des marges appropriées pour le domaine INPUT lui-même, afin de coïncider avec notre mise en page:
1 2 3 4 5 6 7 8 9 10 | entrée { none ; border: none; none ; background: none; 4px ; padding: 4px; 200px ; width: 200px; 12px ; font-size: 12px; 12px ; margin-top: 12px; 24px ; margin-left: 24px; } |
Très bien, comme d'habitude. Comment pouvez-vous personnaliser un fichier d'entrée? Cet article est très agréable, mais quand je veux quelque chose sur-mesure de petits boutons ont tendance à utiliser le flash.
@ Napolux:
Un fichier d'entrée sur le terrain ne peuvent pas être personnalisés directement, comme en témoigne le lien que tu m'as quitté. Le Flash est la solution la plus adoptée, même si l'animation Flash est caché et la mise en page se fait par un simple champ
INPUT, ou complètement dans le graphisme, et déclenche la sélection de fichiers via la communication Javascript -> Flash. La sélection des fichiers, bien sûr, le processus inverse; Flash -> JavaScript.En outre, la solution pour permettre à Flash de soutien multiselect, donc je pense une option très valable, sauf contre-approprié (voir par exemple le backend WordPress lorsque vous chargez un média, il suffit d'utiliser Flash).
(alias Ajax) non era ancora noto… Sinon - comme indiqué dans le lien que vous avez laissé dans les commentaires - forcer une utilisation totalement HTML dell'artifizio du champ de saisie du fichier caché ... ça me rappelle tellement l'utilisation de
IFRAMElorsque l'objetHTTPRequest(alias Ajax) n'a pas été connue ...[...] 06) Personnalisation d'un formulaire graphique [...]
Non champs de saisie personnalisables?
Désolé je me suis perdu ou quelque chose ou quelque chose n'est pas juste parce que les propriétés CMQ sont personnalisables.
Qu'avez-vous référence?
@ Francodane: Je n'ai jamais dit que le champ
inputne sont pas personnalisables. Le champinputtype de fichier, cependant, est une exception ... ce n'est pas personnalisable dans le sens où il montre une mise en page complètement différente selon le navigateur. Pour d'autres, cependant, que la règle de la compatibilité ... ou, de personnaliser ce que vous voulez, mais assurez-vous que le résultat sur tous les navigateurs.