Listbox hover

Add-ons for Pale Moon and other applications
General discussion, compatibility, contributed extensions, themes, plugins, and more.

Moderators: FranklinDM, Lootyhoof

Goodydino
Keeps coming back
Keeps coming back
Posts: 815
Joined: 2017-10-10, 21:20

Listbox hover

Unread post by Goodydino » 2023-05-15, 20:39

Is there any way to make a listcell in a listbox change its appearance when hovered? I have tried searching, but cannot find anything about listcells. I do not care if it is the label or the checkbox that changes.

Blacklab
Board Warrior
Board Warrior
Posts: 1080
Joined: 2012-06-08, 12:14

Re: Listbox hover

Unread post by Blacklab » 2023-05-16, 09:20

Should be possible with the right CSS userstyle, right selector, etc? Which listcell in which listbox... Pale Moon or an extension?

Goodydino
Keeps coming back
Keeps coming back
Posts: 815
Joined: 2017-10-10, 21:20

Re: Listbox hover

Unread post by Goodydino » 2023-05-16, 19:03

It should work for any listbox in the browser's interface. I was experimenting with adding ":hover" to the element for a listcell check, but it did not work. It evidently does not work the same way as with normal checkboxes.

Blacklab
Board Warrior
Board Warrior
Posts: 1080
Joined: 2012-06-08, 12:14

Re: Listbox hover

Unread post by Blacklab » 2023-05-16, 22:33

Curious as to why adding ':hover' not working... and after some research online... rather suspect that the 'Select/Option' box elements may well be rendered by the OS... so wouldn't be able to change their style using CSS? You get what the system provides.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35402
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Listbox hover

Unread post by Moonchild » 2023-05-16, 22:55

You can't stype <option>s because those indeed are styled depending on the OS and often drawn by using OS widgets.

Here's a quick run-down of form widgets grouped by styling flexibility:

Easy to style:
  • <form>
  • <fieldset> and <legend>
  • Single-line text <input>s (e.g. type text, url, email), except for <input type="search">.
  • Multi-line <textarea>
  • Buttons (both <input> and <button>)
  • <label>
  • <output>
  • <select> (caveat: only the in-form select box can be styled. if you use considerably deviating metrics like large padding etc., it may look really bad when popping open the OS widget when dropping down the list)
Harder to style:
  • Checkboxes and radio buttons
  • <input type="search">
Widgets having internals can't be styled in CSS alone:
  • <input type="color">
  • Date-related controls such as <input type="datetime-local">
  • <input type="range">
  • <input type="file">
  • Elements involved in creating dropdown widgets, including <option>, <optgroup> and <datalist>.
  • <progress> and <meter>
The best you can do for this group is usually building your own equivalent using standard html elements and processing clicks/hovers/etc. with JS.
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

Enobarbous
Apollo supporter
Apollo supporter
Posts: 42
Joined: 2022-12-06, 17:44

Re: Listbox hover

Unread post by Enobarbous » 2023-05-17, 10:41

Is the inability to style "listcell" on hover related to system styles?
As far as I see, the problem is that you can't get the hover event on listcell, it only triggers on listitem (and listitem is styled normally by :hover)
Even in the test example from here (as well as in some extensions that use xul:listbox) you can't select a cell, not a row.
And according to this, the listcell simply does not have the ability to "select"...
I am sorry for the use of auto-translator to post

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35402
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Listbox hover

Unread post by Moonchild » 2023-05-17, 11:04

listcell is an internal and display specific. it's OS dependent and not addressable as html.
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
jars_
Lunatic
Lunatic
Posts: 397
Joined: 2016-12-27, 00:12

Re: Listbox hover

Unread post by jars_ » 2023-05-17, 12:17

If I get you right... :think:
hover style for userChrome.css:

Code: Select all


treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) {
	background-image: -moz-linear-gradient( rgba(0,255,169,0.8), rgba(0,213,127, 0.8) ) !important;
	}
To set the color, you need to find another selector, just write here color: ... does not work. dig into the file chrome://global/skin/tree.css

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35402
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Listbox hover

Unread post by Moonchild » 2023-05-17, 12:47

Note that would only work for us and only as long as our internal addressing of XUL styling doesn't change. It's certainly not portable (you're editing chrome styling, not content styling)
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

Goodydino
Keeps coming back
Keeps coming back
Posts: 815
Joined: 2017-10-10, 21:20

Re: Listbox hover

Unread post by Goodydino » 2023-05-17, 19:09

It is possible to change the whole background of a listcell with hover, since Walnutty does that. I guess I have to settle for that.

User avatar
jars_
Lunatic
Lunatic
Posts: 397
Joined: 2016-12-27, 00:12

Re: Listbox hover

Unread post by jars_ » 2023-05-17, 21:09

Goodydino you are just a moron. soo_fkn_sorry :problem: dont be like this.
You could not initially describe, what and where you want to change?
А ты не мог изначально описать, что и где ты хочешь изменить?
If you need changes in the skin "Walnutty", then, you must change the skin yourself or ask the author to change it, at your request.
Если тебе нужны какие-либо правки в "шкурке", значит ты должен сам разобраться как там что и зачем, или попросить автора изменить "шкурку" по твоему запросу.

ok.Skin "Walnutty" does the same thing, reassigns 'treechildren'. All styles placed in .\walnutty-1.8.1.xpi\chrome\global\tree.css.

Code: Select all

treechildren::-moz-tree-row(hover) {
    background-image:url(chrome://global/skin/hout.png)
    }
treechildren::-moz-tree-row(selected) {
    background-image:url(chrome://global/skin/hout-hover.png)
    }
treechildren::-moz-tree-row(selected,focus) {
    background-image:url(chrome://global/skin/hout-active.png)
    }
treechildren::-moz-tree-row(current,focus) {
    border:1px dotted #893B00
    }

etc.
That's the way! ;)

Goodydino
Keeps coming back
Keeps coming back
Posts: 815
Joined: 2017-10-10, 21:20

Re: Listbox hover

Unread post by Goodydino » 2023-05-18, 21:46

jars_ wrote:
2023-05-17, 21:09
Goodydino you are just a moron. soo_fkn_sorry :problem: dont be like this.
You could not initially describe, what and where you want to change?
А ты не мог изначально описать, что и где ты хочешь изменить?
If you need changes in the skin "Walnutty", then, you must change the skin yourself or ask the author to change it, at your request.
Если тебе нужны какие-либо правки в "шкурке", значит ты должен сам разобраться как там что и зачем, или попросить автора изменить "шкурку" по твоему запросу.
No, Walnutty already does a change which I found usable. It was not exactly what I wanted but it will do. I copied a line from listbox.css from there and added that line to the same file in the other themes.

Locked