In HTML ,inline css not working

Question

i want to change height & width of datalist HTML but it is not working. how to solve this?

          <input type="text" list="dose" />
          <datalist id="dose" class="doseinput" style="height: 34px;width: 153px; ">
            <option>1+1+1</option>
            <option>1+1+0</option>
            <option>1+0+0</option>
            <option>0+1+0</option>
            <option>0+0+1</option>
            <option>0+1+1</option>
            <option>1+0+1</option>
          </datalist>

score 4 · Accepted Answer · answered Jul 09 '19 at 14:29

4

Give the height and width to the input tag instead of datalist.

<input type="text" list="dose" style="height: 34px;width: 153px;"/>
          <datalist id="dose" class="doseinput">
            <option>1+1+1</option>
            <option>1+1+0</option>
            <option>1+0+0</option>
            <option>0+1+0</option>
            <option>0+0+1</option>
            <option>0+1+1</option>
            <option>1+0+1</option>
          </datalist>

answered Jul 09 '19 at 14:29

Monika Mangal

1,665
7
17

Great. it would be really good for others as well if you will mark it as the correct answer :-) – Monika Mangal Jul 09 '19 at 14:34

score 0 · Answer 2 · answered Jul 09 '19 at 14:43

You can't do it, replacement better use but are actually composed of regular HTML elements that CAN be styled.

this element is an example of a "replaced element", these are OS-dependent and are not part of the HTML/browser, it cannot be styled via CSS, you can style it via JS if you can.

For more information look exmaple here https://stackoverflow.com/a/19217244/6701087

In HTML ,inline css not working

2 Answers2