¿Cómo el estilo adecuadamente un área de texto con sombras interiores y barra de desplazamiento

Estoy poniendo un centro de la sombra en todos mis controles, entradas y áreas de texto utilizando el siguiente CSS:¿Cómo el estilo adecuadamente un área de texto con sombras interiores y barra de desplazamiento

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; 
}

y, con algún otro estilo , se parece a esto (en Firefox, y similares en otros navegadores):

enter image description here

Pero el relleno que ayuda a separar el contenido de la sombra interior rompe el área de texto alrededor de la barra de desplazamiento:

enter image description here

y si se quita el relleno, el texto se superpone a la sombra, así:

enter image description here

puedo agregar relleno sólo a la izquierda, la resolución de la superposición con la sombra izquierda, pero no con la sombra de la parte superior, mientras que la barra de desplazamiento aspecto bueno:

enter image description here

también puedo añadir p añadiendo todas partes, pero en el lado derecho, con el texto que se muestra correctamente, pero la barra de herramientas todavía se ve bastante extraño:

enter image description here

¿Hay alguna manera de solucionar esto?

Fuente

2012-01-17 Pablo

Cómo recuperar la propiedad padding que afectan sólo el contenido sino no la barra de desplazamiento no es posible usando elementos textarea estándar. Para eso puede usar un DIV contenteditable. Por ejemplo, comprobar esto violín: 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; 
}

Fuente

2012-01-17 14:45:49 techfoobar

Ya veo ... bueno ... antes de hacer eso, probablemente debería decidir si alguna vez se usará texto sin formato, o si debería ir para algún editor de texto enriquecido de todos modos. ¿Sabes cuál es el soporte de navegador para contenteditable? ¿Dónde va a fallar? – Pablo

Tiene un soporte bastante bueno en todos los navegadores modernos, incluidos FF, Chrome e IE. Sin embargo, navegadores tan enfermos como IE7 pueden romper cualquier cosa. :) – techfoobar

Si desea publicar los datos de textarea con un formulario html normal, los datos en un div satisfactorio no se publicarán. Será con un área de texto. Todavía una buena idea. – timing

Puede simplemente agregar: padding-right: 0; al selector textarea y alineará su barra de desplazamiento con el lado del elemento. :)

Fuente

2012-01-17 13:50:09 Kyle

Si hago eso, la parte superior e inferior de las barras de desplazamiento aún no están alineadas. Parece bastante extraño. – Pablo

¿Estás usando una barra de desplazamiento personalizada allí? – Kyle

No, el estándar. Eso es Firefox en MacOSX. Publicaré otra captura de pantalla. – Pablo

Se puede envolver el área de texto en un 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 aquí: http://jsfiddle.net/rXpPy/

Fuente

2012-01-17 14:00:58 timing

Pensé en eso, pero ese relleno que haría que el texto no se superpusiera a la sombra, el relleno en textarea, también provocaría que la barra de desplazamiento se separe de los bordes. – Pablo

Consulte el jsFiddle que agregué a mi respuesta. – timing

¿Qué navegador estás usando? Mi Chrome en ubuntu ignora el relleno en la barra de desplazamiento, pero lo hace para rellenar el contenido. – timing

Además - en lugar de utilizar simplemente de entrada, que se dirigirá a los botones, puede orientar entradas de texto específicamente

input[type="text"]

Fuente

2012-12-13 23:26:40 Tapefreak

¿Cómo el estilo adecuadamente un área de texto con sombras interiores y barra de desplazamiento

Respuesta

Cuestiones relacionadas