Utilizing :focus-visible pseudo-class on a custom control

A custom control, made of 

<div tabIndex="0">....</div>
, raises the question: how can we ensure that it works with :focus-visible? Sometimes, creating a complex custom control using <div> and <span>, styled to resemble a native control, is more straightforward. How do we make a <div> act like a button for :focus-visible? And how can we achieve the same effect for a <textarea>-like <div>? Is there a way to inform CSS that a specified 
<div class="my-custom-ctrl">
serves as either a button or a text editor?

Explore my sandbox here

htmlcssonfocus

Answer №1

If you utilize the tabindex, it will function properly.

.focusable:focus-visible {
    color: red;
}
<div tabindex="0" class="focusable">
Can be focused
</div>

<div>
Cannot be focused
</div>

<div tabindex="0" class="focusable">
  Can be focused
</div>

<div>
Cannot be focused
</div>
<div tabindex="0" class="focusable">
Can be focused
</div>

<div>
Cannot be focused
</div>

<div tabindex="0" class="focusable">
  Can be focused
</div>

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

The Performance of My Device is Lagging When Executing CSS Transition Effects

I've been working on coding in HTML, but I've encountered an issue where my device seems to struggle with running CSS smoothly. You can take a look at the code I've written on CodePen. html { height: 100%; } body { background: linear ...

javascripthtmlcss

Generating dynamic dropdown menus and text content by extracting information from a database

Trying to wrap my head around dynamically generating elements on a page from a database and adding them to a table element. I know I can use jQuery for this, but I'm not sure if I should pre-build the data and show/hide it as needed. First, I have a ...

phpjqueryhtmlcsstwitter-bootstrap

Alternative to using the disabled attribute in JavaScript to make a checkbox read-only option

Does anyone know how to make a checkbox readonly so that its value can be submitted, while also disabling it? Using the disable attribute prevents the value from being submitted, and setting it as readonly doesn't seem to work for checkboxes. Your as ...

javascriptjqueryhtmlcss

Is there a way to dynamically change the height in jQuery/JavaScript?

I am encountering an issue with my embed code where the height changes randomly after a few seconds, depending on certain parameters. Here is an example of the code I am using: $( <embed></embed>) .attr("src", "http://www.bbs.com") ...

javascriptjqueryhtmlcss

CSS behaving strangely with the height property

I've run into a specific issue with a div element that contains multiple buttons. I am trying to adjust the height and position of one button so that it takes up space above the other buttons, but every time I make changes to its height and position, ...

jqueryhtmlcss

Creating various styles for cards using ngFor within Angular

I have been working on applying different styles to cards created using ngFor in Angular. Here's how it currently looks: https://i.sstatic.net/UhbSp.png My aim is to set unique styles for each card. Due to the ngFor loop used in creating them, I ini ...

htmlcssangular

Tips for updating content on hover

I have been experimenting with this idea and initially thought it would be a simple task. My goal is to hover over the 'NEW' label and change its content to 'ADD' using only CSS. body{ font-family: Arial, Helvetica, sans-serif; } ...

htmlcss

Show only the portion of the image where the cursor is currently hovering

Information in advance: You can check out the current code or view the live demo (hover image functionality not included) at . The concept: I would like to have it so that when I hover my cursor (displayed as a black circle) over the image, only the s ...

javascripthtmlcssimagehover

Using Python with Selenium, attempt to click on a button designated as type="button"

I've been trying to click on a button in this Airbnb listing but none of the codes I tried seem to work. Here is one example of the HTML code: <li data-id="page-2" class="_1eqazlr"> <button type="button" class="_1ip5u88" aria-label="Page 2 ...

htmlpython-3.xselenium

Getting CSS source maps working with LESS in Webpack 4: A user's guide

I have been attempting for an extended period to configure CSS sourcemaps in webpack with no success. I am unsure where the issue lies within the process. I am hopeful that someone can provide guidance in the right direction. Here is the situation: https ...

csswebpacklesswebpack-4

"Strategies for incorporating a history of MySQL events into your database management system

Currently, I have a MySQL table with the following fields: id int(11) primary auto_increment data(text) user varchar(20) date text In my web-based UI using PHP, I display the data (including user and date), and users can add or delete data as needed. The ...

phpmysqlhtml

Table-driven forms in Angular

I am facing a requirement where I need to submit a form containing five records in a table format. Here is how the table looks: https://i.sstatic.net/82ZFM.png This is the code snippet for the form: <form [formGroup]="FeedBack" (ngSubmit)=&q ...

htmlangulartypescript

Generate an embedded iframe displaying a linked code snippet

I manage an online store and once a courier has been dispatched, I send out an email to customers with tracking information for their shipments. To streamline this process, I have implemented an input field (Code provided below). In this field, when a us ...

javascripthtmljqueryajaxiframe

Creating a stylish switch button with Html and CSS

I came across a fantastic tool for creating CSS buttons . I have created a switch button and I know that I need to run two JS codes - one for when the switch is on (alert("on")) and another for when it's off (alert("off")). Could you please assist me ...

htmlcss

Searching for a post by content or title on Flask can be done by utilizing the search functionality built

I've created routes and forms, but when I tried to search, it showed "cannot be found." Here is my code: routes.py: @app.route('/search',methods=['GET','POST']) def posts_lists(): q = request.args.get('q') ...

pythonhtmlflask

"Enhance your text with stylish formatting using the

Here is the code snippet I'm currently using to style text: 'formats': { 'format_code': { 'block': 'pre', 'styles': { 'color': '#0000 ...

csstinymce

Creating a Phonegap hybrid application that uses JavaScript redirection can cause an absolute positioned element to intermittently blink, revealing the content that lies

Currently, I am developing a Cordova project for both iOS and Android platforms. Within my project, I have two main pages: index.html and home.html. Each page contains an absolute positioned div (with loading feature) that is visible by default. Here is t ...

javascriptjqueryioscsscordova

What is the best way to ensure that my chosen fonts are implemented on a text box?

I've designed a dropdown menu featuring various font styles. Below the list, I've included a text box. How can I ensure that my font selection applies to the text in the textbox? The goal is to offer customers the ability to personalize their na ...

htmlcsstextfonts

Enabling the focusability of a div element through a click event

I am working on a div that contains a THREE.js visualization and I am trying to make it focusable when clicked. I have experimented with changing the tabindex to 1 or -1, however, while setting it to 1 allows the element to be focused using tab, neither op ...

htmlfocusthree.js

Using a border-radius of 50% is causing imperfect circles to appear in the Chrome browser

Typically, using border-radius: 50% is effective for many situations, and in Chrome it creates a circle appearance. However, when attempting to rapidly rotate a circle in this specific case, an issue arises. Is this a glitch with Chrome's border-radi ...

cssgoogle-chrome