All geek questions in one place

How to format scrollbar style in textbox?

I am sure that this should not be as complicated as it seems ... I cannot use jQuery scrolling because I need it to act as a standard textarea form when it is submitted. You need to work in IE7 +, Safari and firefox, at least ... any ideas?

Tried this ...

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

... but only works in IE?

Any ideas?

+6
source share
3 answers

I never did this, so I'm not quite sure about it, but I remember that my colleagues did it for the site we were developing, and it had the same minor problem.

I think you are on the right track, although the scroll properties should be in the css body as follows:

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

Perhaps you could try specifying the desired text area and id property and apply this in css so that:

 textarea.(insertrelevantID) { ..... }
+2
source

You can use this script:

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

However, I think that you will always have problems with the design of the textarea scroll bar in pure CSS due to the browser doing this no matter how you like it.

0
source

Use the -webkit-scrollbar elements for the scrollbar:

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

Here you can find more information: https://css-tricks.com/almanac/properties/s/scrollbar/

0
source

Source: https://habr.com/ru/post/895146/

More articles:


All Articles