3

I'm using range inputs in my questionnaire and I want to make the lines bolder. So far the code I have is

<input type="range" id="q8a1" name="#" min="1" max="10" list="input01" value="1" step="1" style="width:100%; />

<datalist id="input01">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
    </datalist>

I tried using inline CSS to add a border attribute and a few other things but nothing worked. I gooogled everything I could think of revolving around this and researched pseudo classes to see if there's a way to style it the same way they have them to style the thumb and rail for the range input but I just couldn't find anything. Is this possible to do?

Optiq
  • 2,835
  • 4
  • 33
  • 68
  • line of range inputs? – Dhara Jan 01 '16 at 07:11
  • My information maybe outdated but I think it is not possible to directly style the ticks and you'd need to use some custom styling like in my answer here - http://stackoverflow.com/questions/29873586/range-input-slider-with-markings-for-intermediate-points/29875717#29875717. – Harry Jan 01 '16 at 07:16
  • Possible duplicate of [Ticks for type="range" HTML input](https://stackoverflow.com/questions/26612700/ticks-for-type-range-html-input) – henry Jun 15 '17 at 15:27

2 Answers2

2

Try adding list="tickmarks" attribute

More info here!

German
  • 496
  • 1
  • 4
  • 10
0

According to this, and as of December 2, 2017, this is still not supported.

Greeso
  • 7,544
  • 9
  • 51
  • 77