CODEWITHSUNDEEP
htmlcssgoogle-chrome
Nik
Nik

Reputation: 709

Weird mouse cursor for textarea scrollbar on Chrome Browser

The are three weird thing about this <textarea> below.

  1. The border.
  2. The resizer image.
  3. Mouse cursor.

(Q1 & Q2) The ::-webkit-resizer border and image did disappear when textarea get resized (which is the desired result). But it does appear on first load. How do I fix that?

Webkit Resizer Screenshot

(Q3) Mouse cursor cursor: text are shown when I hover on the scrollbar. Why not the normal cursor? I'm using Chrome (Chromium: 76.0.3809.100 - 64-bit).

::-webkit-scrollbar{background:#888;cursor:grab;height:30px;width:30px}
::-webkit-scrollbar-corner,
::-webkit-resizer{
background:#888;
border-color:#888 #666 #666 #888;
border-style:solid;
border-width:15px;
}
::-webkit-scrollbar-thumb{
background:#666;
border:3px solid #888;
border-radius:6px;
}
::-webkit-scrollbar-thumb:hover{
background:#555;
border:2px solid #888;
border-radius:6px;
}
::-webkit-scrollbar-thumb:active{background:#444}
<textarea style="height:150px;width:200px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam eu tortor vitae neque iaculis finibus viverra nec metus.
Proin rhoncus justo ipsum, at consequat leo posuere id. Duis tincidunt consectetur efficitur.
Curabitur semper rhoncus semper.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam eu tortor vitae neque iaculis finibus viverra nec metus.
Proin rhoncus justo ipsum, at consequat leo posuere id. Duis tincidunt consectetur efficitur.
Curabitur semper rhoncus semper.
</textarea>

Upvotes: 0

Views: 351

Answers (1)

Kaiido
Kaiido

Reputation: 136658

Answering only the first question about the ::resizer part.

This is known bug, marked as P3 (low priority) even though there is a CL available in the bug report (and hence hope that it gets fixed some day).

For a workaround, you can set up an hack with an animation that will change the resize property. This will force the browser to render your styled version:

/* Our force-paint hack */
textarea {
  resize: auto;
  animation: resizer-hack 0.01s forwards;
}
@keyframes resizer-hack {
  from { resize: none; }
  to { resize: auto; }
}

/* Your code */
::-webkit-scrollbar {
  background: #888;
  cursor: grab;
  height: 30px;
  width: 30px
}
::-webkit-scrollbar-corner,
::-webkit-resizer {
  background: #888;
  border-color: #888 #666 #666 #888;
  border-style: solid;
  border-width: 15px;
}
::-webkit-scrollbar-thumb {
  background: #666;
  border: 3px solid #888;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
  border: 2px solid #888;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:active {
  background: #444
}
<textarea style="height:150px;width:200px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam eu tortor vitae neque iaculis finibus viverra nec metus.
Proin rhoncus justo ipsum, at consequat leo posuere id. Duis tincidunt consectetur efficitur.
Curabitur semper rhoncus semper.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam eu tortor vitae neque iaculis finibus viverra nec metus.
Proin rhoncus justo ipsum, at consequat leo posuere id. Duis tincidunt consectetur efficitur.
Curabitur semper rhoncus semper.
</textarea>

For the cursor, that is an independent bug, which should have its own question.

Upvotes: 1

Related Questions