Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Adding images to option elements within a select element

1583928903
LongShadow
Pro
Sheet Author
I am trying to find out if it is possible to add an image to a select option on a custom sheet. I know outside of roll20 it is possible with a bit of CSS and javascript, but I was wondering if it is something that can be done within roll20. It would be really nice if the drop down menu I am working on had little icons instead of boring old numbers!
1583961073
GiGs
Pro
Sheet Author
API Scripter
You cant use javascript in roll20 to modify the sheets. It might be possible with a pure CSS solution, say using background-image. I'm not too skilled with CSS, but I know you can change the colours and other styling of the fonts in the select, so maybe you can do this. You can also use google fonts now, so if there's a font with images as characters, you can use that pretty easily.
1583978555
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Would emojis work?
1584005874
LongShadow
Pro
Sheet Author
GiGs said: You cant use javascript in roll20 to modify the sheets. It might be possible with a pure CSS solution, say using background-image. I'm not too skilled with CSS, but I know you can change the colours and other styling of the fonts in the select, so maybe you can do this. You can also use google fonts now, so if there's a font with images as characters, you can use that pretty easily. I tried using CSS, but either browser support (or lack of), existing CSS in the sheet we are using, or something roll20 is doing, stopped it from working. There is an example in CSS Wizardry that basically replaces the select element, so I might give that a go.
1584060018

Edited 1584060102
Miguel
Roll20 Production Team
Sheet Author
Hey Longshadow, The options elements inside a select offer very few styling possibilites due to the fact that it is replaced by the OS own select component during runtime. Unfortunately, background images are not among these capabilities. Most of the CSS+JS solutions work by replacing the select components by div, lists, etc. and customizing the appearance of those. These plugins wont work on Roll20 due to the fact that dom manipulation is restricted in the Sandbox. What you could do, however, is to create something like: HTML: <div class="sheet-customSelect">     <span name="attr_myvalue">Select an option...</span>     <input type="checkbox" name="attr_myvalue_toggle" value="1">     <div class="sheet-customSelect-options">         <button type="action" class="sheet-opt_1" name="act_set_myvalue_1">Value 1</button>         <button type="action" class="sheet-opt_2" name="act_set_myvalue_2">Value 2</button>         <button type="action" class="sheet-opt_3" name="act_set_myvalue_3">Value 3</button>     </div> </div> CSS: .sheet-customSelect {     position: relative; } .sheet-customSelect span {     display: inline-block     width: 100px;     height: 30px;     line-height: 30px; } .sheet-customSelect input {     appearance: none;     width: 100px;     height: 30px;     opacity: 0;     top: 0;     left: 0;     z-index: 1; } .sheet-customSelect input:not(:checked) + .sheet-customSelect-options {     display: none; } .sheet-customSelect .sheet-customSelect-options button {     //general styles... } .sheet-customSelect .sheet-customSelect-options .sheet-opt_1 {     //style for button 1...     background: url(...); } SHEETWORKER: on("clicked:set_myvalue_1", function() {     setAttrs({myvalue: "value 1", myvalue_toggle: ""});     //Set the value of the select to 1 and toggle to empty (closes the list) }); ... I just wrote this pseudo code from the top of my head so please forgive any mistakes :P