Puis-je style la redimensionner grabber de textarea?
Mon designer m'a donné de la conception avec des zones de texte avec style redimensionner grabber. La question est: puis-je style ou pas ?
- Je pense que ma réponse a résolu votre question...
- Que redimensionner grabber est trop petit sur 4K moniteurs.
Vous devez vous connecter pour publier un commentaire.
Cet élément est affiché par le navigateur lui-même et ne fait pas partie de la spécification HTML. À moins que votre concepteur de la création de leur propre navigateur, vous êtes coincé avec celui que vous obtenez.
WebKit fournit le pseudo-élément
::-webkit-resizer
pour la redimensionner le contrôle, il s'ajoute automatiquement à la partie inférieure droite detextarea
éléments.Il peut être masqué par l'application de
display: none
ou-webkit-appearance: none
:CSS:
HTML:
Cette affiche comme suit dans Chrome 26 sur OS X:
Remarque: l'Ajout de
display: none
à::-webkit-resizer
ne fait pas empêcher l'utilisateur de redimensionner la textarea, il vient se cache le contrôle. Si vous souhaitez désactiver le redimensionnement, l'ensemble de laresize
propriété CSS pournone
. Ce cache également le contrôle et a l'avantage de travailler dans tous les navigateurs qui prennent en charge le redimensionnement des textareas.La
::-webkit-resizer
pseudo-élément permet également de base du style. Si vous pensiez que le redimensionnement de contrôle pourrait utiliser beaucoup plus de couleur, vous pouvez ajouter cette:CSS:
HTML:
Cette affiche comme suit dans Chrome 26 sur OS X:
::-webkit-resizer{ border: 9px solid rgba(0,0,0,.1); border-bottom-color: rgba(0,0,0,.5); border-right-color: rgba(0,0,0,.5); outline: 1px solid rgba(0,0,0,.2); box-shadow: 0 0 5px 3px rgba(0,0,0,.1) }
Au lieu d'appliquer les CSS pour
::-webkit-resizer
(qui ne semble plus être le travail en Chrome 56 ou FireFox 51), vous pouvez créer une "coutume" de la poignée à l'aide du balisage. J'ai trouvé cet exemple après une recherche sur google:Personnalisé CSS3 TextArea Poignée de Redimensionnement
Copié de marquage dans le cas d'avenir, lien mort:
Et le CSS à partir de l'exemple du cours, vous pouvez appliquer n'importe quel style que vous aimez :
Pourquoi ne pas montrer une image de fond?
http://jsfiddle.net/1n0d529p/