Making a "readonly" select tag

Hi, im rather new to the Character Sheet creation, and im triying to use a select tag to show the damage modifiers asociated to a input tag, and i dont want the user to click and change the value from the select tag, but the "disabled" atributte for the select tag just stays in the default option, and there is no "readonly" attribute for the select tag. There is a way to simulate the readonly attribute whitin the scope of Roll20? <!--Damage--> < input   type = "number" name = "attr_damagetaken"   min = 0 max = 5 > <!--Damage Modifiers--> < select   type = "text" name = " attr_damagetaken " >      < option   value = "0" >   </ option >      < option   value = "1" > –1 </ option >      < option   value = "2" > –2 </ option >      < option   value = "3" > –2 </ option >      < option   value = "4" > –2 </ option >      < option   value = "5" > –3 </ option > </ select >

How are you setting the value? I’d guess a sheet worker, in which case I’d just use a named span that the sheet worker sets. 

I'm not using a sheetworker for that, i'm setting the value using a trick i've seen in some Character Sheet, using the same "name=attr_" in the first input  and the select tag, so when i change one value in one, and Roll20 changes the value on the other.

I don't think it's possible to disable the &lt;select&gt; in that way. At least it's possible to achieve the same effect with have a sheet worker to update the second field that players aren't supposed to touch, and then just do some styling to it to make it look distinct. The wiki have guides on how sheet workers can be made: <a href="https://wiki.roll20.net/Sheet_Worker_Scripts" rel="nofollow">https://wiki.roll20.net/Sheet_Worker_Scripts</a>

I used a combination of CSS and "tabindex=-1" in HTML to do it: HTML: &lt;!--Damage--&gt; &lt;input type="number" name="attr_damagetaken" min=0 max=5&gt; &lt;!--Damage Modifiers--&gt; &lt;select type="text" class="disabled-select" tabindex="-1" name="attr_damagetaken"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="0"&gt; &lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="1"&gt;–1&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="2"&gt;–2&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="3"&gt;–2&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="4"&gt;–2&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="5"&gt;–3&lt;/option&gt; &lt;/select&gt; CSS: .sheet-disabled-select {pointer-events: none; appearance: none;} Thanks for your help!

Is the select just for visual reference or are you wanting to use it for calculations and/or macros?&nbsp; If you check the value of @{damagetaken}, do you get the value found in the input or the one displayed in the select?&nbsp; A quick check shows that the input value is used instead of the select.&nbsp; Maybe because it comes first in the html... not sure. If you want to use the select's value for calculations and/or macros, why not just use the select to pick the damage and use an attribute backed span to display the value?&nbsp; example; &lt;div&gt; &lt;!--Damage--&gt; &lt;select type="text" name="attr_damagetaken"&gt; &lt;option value="0" selected&gt;0&lt;/option&gt; &lt;option value="-1"&gt;1&lt;/option&gt; &lt;option value="-2"&gt;2&lt;/option&gt; &lt;option value="-2"&gt;3&lt;/option&gt; &lt;option value="-2"&gt;4&lt;/option&gt; &lt;option value="-3"&gt;5&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div&gt; &lt;!--Damage Modifiers--&gt; Damage Mod:&lt;span name="attr_damagetaken"&gt;&lt;/span&gt; &lt;/div&gt; Apologies if I'm totally missing the point of a "read-only select".&nbsp; Highly likely. ;-P

I didn't give a very clear example of what i wanted, so i understand ;), it was more to show the modifiers and some flavor text asociated, but the example you gave me its very useful, Thanks!