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!
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.
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.
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)
});
...
