What is the reason behind user-agents not incorporating the CSS cursor style for video elements?

I've been testing whether it's possible to change the CSS property for cursor on a default HTML5 video element. Based on my findings:

  1. Most user-agents (browsers) do not support the default implementation of cursor: pointer. Instead, they display the normal OS arrow/control indicator.

  2. Setting cursor: pointer will only change the cursor in certain areas within the video element where clickable elements are not present, such as play, pause, seek, mute, and fullscreen buttons.

  3. This behavior seems counterintuitive. Ideally, the clickable elements of the video tag (control bar, center play button) should have the cursor style applied or even apply it to the entire video element.

Any insights on this issue would be greatly appreciated!

htmlfirefoxcsswebkithtml5-video

Answer №1

One way to style elements in webkit is by targeting their pseudo elements

video::-webkit-media-controls-panel

video::-webkit-media-controls-play-button

video::-webkit-media-controls-volume-slider-container

video::-webkit-media-controls-volume-slider

video::-webkit-media-controls-mute-button

video::-webkit-media-controls-timeline

video::-webkit-media-controls-current-time-display

video::-webkit-full-page-media::-webkit-media-controls-panel

video::-webkit-media-controls-timeline-container

video::-webkit-media-controls-time-remaining-display

video::-webkit-media-controls-seek-back-button

video::-webkit-media-controls-seek-forward-button

video::-webkit-media-controls-fullscreen-button

video::-webkit-media-controls-rewind-button

video::-webkit-media-controls-return-to-realtime-button

video::-webkit-media-controls-toggle-closed-captions-button

Update

To see more webkit pseudo elements, check out this extended list: https://gist.github.com/afabbro/3759334

Answer №2

Why have user-agents not implemented the CSS cursor style for video elements?

The absence of this feature is likely due to it being unnecessary.

It appears that the expected implementation has been reversed.

What do you believe should be the correct approach? Pointers are typically not needed for interactive elements. For instance, when hovering over a scroll bar, the cursor remains unchanged. In many computer programs, button cursors also do not alter their appearance. This is because hover and focus states provide sufficient indication of clickability.

The prevalence of cursor: pointer on websites is mainly attributed to hyperlinks. Hyperlinks do not automatically change on hover, hence the need for a visible pointer to signal clickability.

For <video> elements, the existing hover states are deemed adequate, eliminating the necessity for cursor modifications.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Loop through items in a list using Angular.js and display each item within an <

I am facing an issue where the model returned from the server contains html tags instead of plain text, such as b tag or i tag. When I use ng-repeat to create a list based on this model, the html is displayed as pure text. Is there a filter or directive av ...

javascripthtmlangularjs

Adjustable CSS menu with dropdown on screen size change

I am currently working on creating a responsive CSS menu with dropdown functionality. I am facing some challenges in implementing this feature. Here is the progress so far: http://codepen.io/anon/pen/vmxua Below is the CSS code snippet: nav { margin: 0 a ...

htmlcssmenu

Having trouble with php isset function not functioning properly during search?

if (isset($_GET['k'])) { $k=$_GET['k']; $query="SELECT * FROM `upload` WHERE `keywords` LIKE '%$k%' "; @mysql_connect("localhost","root","") or die("error"); mysql_select_db("lol") ...

phphtml

The list countdown for loop only appears in the initial iteration

Hey there, I'm currently facing an issue with duplicating my JavaScript countdowns and displaying images of cards on each loop iteration. Strangely, the countdown only appears in the first instance even though it's within the loop. I'm seeki ...

javascripthtmlcss

The options for answering (True, False, Yes, and No) are not currently visible

I am struggling with displaying buttons for "True", "False", "Yes", and "No" in an appended row. Here is the application: Application To use the application, follow these steps: 1. Open the application and click on the green plus button. A modal window ...

javascriptjqueryhtml

What is the method for altering the background color with JavaScript in CSS?

I need assistance with changing the background color using JavaScript. Specifically, I want to change the color of the background property that is located within .diagnosis-kit-inner .nav-tabs .nav-item.active:after. Can someone provide guidance on this? T ...

javascriptcss

Creating a button that seamlessly adapts to all browsers

I am encountering an issue with the positioning of a chat button on my website. Despite my efforts, the button does not remain in the desired location across different browsers and screen resolutions. The browser zoom also causes inconsistencies in the but ...

cssbrowsercross-browserzooming

What are some methods to avoid clipping absolute positioned elements while maintaining a box shadow around the parent div?

Here is an example to illustrate my question: Example Code The code provided above is a simplified version of my actual code. I am facing an issue where setting the wrap-div to overflow: visible prevents the menu from being cut off, but it also causes the ...

javascripthtmlcssoverflow

Looking to switch up the thumbs-up button design?

I am a beginner in using jquery and ajax, and I need some assistance. How can I incorporate this jquery code into my logic: $('.btn-likes').on('click', function() { $(this).toggleClass('liked'); }); Can so ...

javascriptjqueryhtmlajax

What is the simplest way to display an HTTP response in an alert window?

Struggling to display the JSON response using JavaScript's window.alert or alert. As a non-native JS coder, I apologize for my lack of experience. Here are a few attempts I've made based on online examples. My objective is to showcase the JSON r ...

javascriptjqueryhtmlpopupresponse

What is the process for obtaining the longitude and latitude coordinates from a map?

I've been doing my best, but I'm still unable to locate the longitude and latitude of all markers on the map... Link: www.eci-polldaymonitoring.nic.in/psl/default.aspx Rajasthan -> ajmer -> Ajmer north -> press clickhere .. If anyone ...

javascripthtmlgoogle-mapsdictionaryhtml-parsing

Employing the FireFox Driver known as geckodriver

I have encountered an issue with my code browser = webdriver.Firefox('C:\\Users\\ojadi\\Downloads\\geckodriver-v0.26.0-win64\\geckodriver.exe') browser.get('https://www.google.co.uk/') ...

pythonseleniumfirefoxpycharmgeckodriver

What steps should I take to make the code in jsfiddle functional on my Visual Studio Code platform?

const canvasEle = document.getElementById('drawing-container'); const canvasPad = document.getElementById('pad'); const toolbar = document.getElementById('toolbar'); const context = canvasEle.getContext('2d'); const ...

javascripthtmlcsscanvasjsfiddle

Generate spacing between rows of content in HTML or CSS without affecting the spacing between lines of text

In my R Markdown document in R, I want to replace the header labeled "Preface" with grey lines for visual indication. Here's the code snippet I've tried: :::{#preface} <p> Text </p> ::: However, there seems to be no margin at the beg ...

htmlcssr

Automatically start playing HTML5 audio/video on iOS 5 devices

Currently, I am facing a challenge with implementing sound effects in my HTML5 web-app on iOS5. Despite trying various methods, the sound effects are not working as expected. Are there any creative solutions available to gain JavaScript control over an HT ...

javascripthtmlhtml5-videohtml5-audio

Looking for assistance in designing a responsive web page with CSS, specifically in determining the optimal page width

Currently, I am working on making my web page responsive for four different screen sizes (320px, 640px, 980px, and 1024px). Everything looks great and adapts well when I resize the site up to 1024px. However, once the size goes beyond that, I want to preve ...

htmlcssresponsive-designviewport

Issue arises when CSS selectors do not function properly with absolutely positioned divs

I am experiencing an issue with my CSS code that is functional on CodePen but not on my actual website. I am attempting to target the .appraisals class for manipulating the background color of an opaque screen slider containing information. Despite using a ...

htmlcss

Combine several svg elements within a single div row using Bootstrap 5

Is there a way to adjust the SVG settings in order to have two of them side by side within a div class="col" element? ...

htmlcsstwitter-bootstrapsvgbootstrap-5

Changing HTML tags programmatically in Angular while inheriting a template

In my project, I have a Component called DataGrid that represents a table with expandable rows. Each row can be expanded to show a child DataGrid table, which is similar to the parent DataGrid component. To simplify this setup, I created a base class DataG ...

htmlangulartemplatesinheritancetags

Animation Effects in Opera and Internet Explorer

Just unveiled my latest project, CSSload.net - an awesome tool for generating CSS spinners and bars. The animations are running smoothly on Firefox and Webkit browsers. Curious if anyone has tips on animating elements like this in Opera and IE? ...

jqueryajaxcssload