Category: HTML

Sometimes, we want to add a loader image to HTML5 video.

In this article, we’ll look at how to add a loader image to HTML5 video.

How to add a loader image to HTML5 video?

To add a loader image to HTML5 video, we can set the poster attribute.

For instance, we write:

<video poster='https://picsum.photos/200/200' src='https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4' controls></video>

to set the poster attribute to the URL of the loader image.

As a result, the loader image will show until we play the video.

Conclusion

To add a loader image to HTML5 video, we can set the poster attribute.

Sometimes, we want to add a scrollable canvas inside a div.

In this article, we’ll look at how to add a scrollable canvas inside a div.

How to add a scrollable canvas inside a div?

To add a scrollable canvas inside a div, we can make the div scrollable and put a canvas inside it.

For instance, we write:

<div style="width: 150px; overflow: auto; ">
  <canvas width="200" style="border:1px solid #ff0000;"></canvas>
</div>

to add a div with the overflow CSS property set to auto.

And then we add a canvas inside it with a red border.

Conclusion

To add a scrollable canvas inside a div, we can make the div scrollable and put a canvas inside it.

Sometimes, we want to change the selected option background-color CSS style.

In this article, we’ll look at how to change the selected option background-color CSS style.

How to change the selected option background-color CSS style?

To change the selected option background-color CSS style, we can set the style attribute of the select and option elements.

For instance, we write:

<select style="background: #009966; color: #FFF;">
  <option value='0' style="background: white; color: black;">Protect my email</option>
  <option value='1' style="background: white; color: black;">Show email on advert</option>
</select>

to set the whole select element to background color 009966 and color FFF.

Then we override the the styles in the option elements with style="background: white; color: black;".

As a result, we see that the selected item has a green background and white text and the options have black text and a white background.

Conclusion

To change the selected option background-color CSS style, we can set the style attribute of the select and option elements.

Sometimes, we want to disable autocomplete in input.

In this article, we’ll look at how to disable autocomplete in input.

How to disable autocomplete in input?

To disable autocomplete in input, we can set the autocomplete attribute to off.

For instance, we write:

<input autocomplete="off" type="text" name="username">

to add an input with autocomplete disabled.

Conclusion

To disable autocomplete in input, we can set the autocomplete attribute to off.