Wie formatiere ich die scrollbar-Stil auf einem textarea?

Ich bin sicher, das sollte auch nicht so schwierig, wie es scheint... ich kann kein JQuery scrollpane, weil ich es brauche, um zu handeln als ein standard-Formular textarea, wenn es vorgelegt wird.. muss arbeiten im IE7+, Safari & firefox zumindest... irgendwelche Ideen?

Versucht, diese...

textarea {
    scrollbar-face-color: #ff8c00;
    scrollbar-track-color: #fff8dc;
    scrollbar-arrow-color: #ffffff;
    scrollbar-highlight-color: #fff8dc;
    scrollbar-shadow-color: #d2691e;
    scrollbar-3dlight-color: #ffebcd;
    scrollbar-darkshadow-color: #8b0000;
}

... funktioniert aber nur im IE ?

Irgendwelche Ideen??

InformationsquelleAutor Chris Carruthers | 2011-08-16
  1. 2

    Habe ich noch nie so gemacht ich bin nicht ganz sicher, aber ich erinnere mich an einen meiner Kollegen tun dies für eine Seite, die wir entwickelt hatten, und er hatte das gleiche kleine Problem.

    Ich denke, Sie sind auf dem rechten Weg sind, obwohl Sie die scrollbar-Eigenschaften müssen im body der css etwa so:

    body {
 scrollbar-face-color: #ff8c00;
    scrollbar-track-color: #fff8dc;
    scrollbar-arrow-color: #ffffff;
    scrollbar-highlight-color: #fff8dc;
    scrollbar-shadow-color: #d2691e;
    scrollbar-3dlight-color: #ffebcd;
    scrollbar-darkshadow-color: #8b0000;
}

    Vielleicht könnten Sie versuchen, geben Sie die gewünschten text-Bereich und die id-Eigenschaft und anwenden, die in der css so: 

    textarea.(insertrelevantID) {
.....
}
    • Hi vielen Dank, leider scheint dies nicht zu funktionieren, entweder, kämpfen, etwas zu finden, entweder online, obwohl ich hätte gedacht, das sollte ziemlich einfach sein
    • aktualisierte Antwort mit einer anderen Lösung
    InformationsquelleAutor RSM
  2. 1

    Verwenden -webkit-scrollbar pseudo-Elemente für Rollbalken:

    textarea::-webkit-scrollbar {
    width: 1em;
}

textarea::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

textarea::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

    Finden Sie weitere Details hier: https://css-tricks.com/almanac/properties/s/scrollbar/

    • -webkit- styling würde nur funktionieren, auf dem chrome-Browser wäre es nicht??
    • Es würde nur funktionieren, auf webkit Browser. Nicht nur chrome. So, das ist tatsächlich eine Menge gegeben, die Edge ist jetzt webkit.
    InformationsquelleAutor Huy Nguyen
  3. 0

    Können Sie dieses Skript verwenden:

    http://studio.radube.com/html-textarea-custom-scrollbar

    Aber ich glaube, du wirst immer Probleme haben styling eine textarea scrollbar in reinem CSS-aufgrund der Tatsache, das der browser rendert diese aber gerne.

    • Der link funktioniert nicht mehr.
    InformationsquelleAutor Curt
Schreibe einen Kommentar