web-dev-qa-db-fra.com

Comment styliser correctement une zone de texte avec des ombres internes et une barre de défilement

Je mets une ombre intérieure sur tous mes contrôles, entrées et zones de texte en utilisant le CSS suivant:

input {
  padding: 7px;
  -webkit-box-shadow: inset 2px 2px 2px 0px #dddddd;
  -moz-box-shadow: inset 2px 2px 2px 0px #dddddd;
  box-shadow: inset 2px 2px 2px 0px #dddddd;
}

et, avec un autre style, ressemble à ceci (dans Firefox, et similaire dans d'autres navigateurs):

enter image description here

Mais le remplissage qui permet de séparer le contenu de l'ombre intérieure rompt la zone de texte autour de la barre de défilement:

enter image description here

et si je supprime le remplissage, le texte chevauche l'ombre, comme ceci:

enter image description here

Je peux ajouter un remplissage uniquement à gauche, résolvant le chevauchement avec l'ombre gauche mais pas avec l'ombre supérieure, tout en ayant une barre de défilement bien:

enter image description here

Je peux également ajouter du rembourrage partout mais sur le côté droit, ayant le texte affiché correctement mais la barre d'outils semble toujours assez étrange:

enter image description here

Est-ce qu'il y a un moyen de résoudre ceci?

htmlcsstextareashadow
25
pupeno

Il n'est pas possible d'obtenir la propriété padding pour affecter uniquement le contenu mais pas la barre de défilement à l'aide des éléments de zone de texte standard. Pour cela, vous pouvez utiliser un contenteditable DIV. Par exemple, vérifiez ce violon: http://jsfiddle.net/AQjN7/

HTML:

<div class="outer" contenteditable="true">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

CSS:

.outer {
    -webkit-box-shadow: inset 2px 2px 2px 0px #dddddd;
    -moz-box-shadow: inset 2px 2px 2px 0px #dddddd;
    box-shadow: inset 2px 2px 2px 0px #dddddd;
    height: 200px;
    margin: 10px;
    overflow: auto;
    padding: 7px 10px;
    width: 300px;    
    font-family: tahoma;
    font-size: 13px;
    border: 1px solid #aaa;
}
​
19
techfoobar

De plus - plutôt que d'utiliser simplement une entrée, qui ciblera les boutons, vous pouvez cibler des entrées de texte spécifiquement avec

input[type="text"]
0
Tapefreak

Vous pouvez envelopper la zone de texte dans une div:

<div class="textarea-wrapper">
    <textarea>
</div>

css:

.textarea-wrapper{
    box-shadow: inset 2px 2px 2px 0px #ddd;
}
textarea {
    padding: 10px;
    background: transparent;
    border: none;
}

Un jsFiddle ici: http://jsfiddle.net/rXpPy/

0
timing

Vous pouvez simplement ajouter: padding-right: 0; au sélecteur de zone de texte et il alignera votre barre de défilement avec le côté de l'élément. :)

0
Kyle