CODEWITHSUNDEEP
htmlcss
Mahi
Mahi

Reputation: 593

how to add css for aria-describedby

Hi I have the following checkbox and this checkbox should turn red border when the tool tip is shown. The tool tip will show when clicked on submit button when the checkbox is not checked. So I want to show the user the red border for this checkbox.

enter image description here

The html is as below before clicking on submit button

enter image description here

And after clicking the submit button the html is as below.

enter image description here

Only the below piece of code is automatically added when tool tip is shown.

data-original-title title aria-describedby="Tooltip311812"

How to add css for "aria-describedby" and make the checkbox as red border when the tool tip is displayed. Here the Tooltip value is getting dynamically changed on every new reload of the page. for eg : Tooltip311812, Tooltip678934 etc.

I am trying to find the solution and learn in the process. Thanks.

Upvotes: 1

Views: 2620

Answers (1)

Sigurd Mazanti
Sigurd Mazanti

Reputation: 2395

Use [aria-describedby="value"] as your selector.

input[aria-describedby="test"] {
  border: 10px solid black;
}

input[aria-describedby="finished"] {
  border: 10px solid red;
}
<input aria-describedby="test">
<input aria-describedby="finished">

Upvotes: 1

Related Questions