CODEWITHSUNDEEP
htmlcsslabel
user14063075
user14063075

Reputation:

How do I style the aria label element in HTML

I'm trying to make a better looking label for a button when you hover over it, i was wondering how can i style the aria-label element to look like this screenshot i added below.

.the image

Upvotes: 0

Views: 16522

Answers (1)

Adil Ahmed
Adil Ahmed

Reputation: 435

You can use the CSS attribute selector for this.

[aria-label] {
position: relative;
}

[aria-label="Search by voice"]:after {
content: attr(aria-label);
/* Your CSS here, this is just a random one for demonstration */
display: none;
position: absolute;
top: 110%;
left: 10px;
z-index: 5000;
pointer-events: none;
padding: 8px 10px;
line-height: 15px;
white-space: nowrap;
text-decoration: none;
text-indent: 0;
overflow: visible;
font-size: .9em;
font-weight: normal;
color: #fff;
text-shadow: 1px 0 1px #888;
background-color: #412917;
border-left: 6px solid #d37092;
border-radius: 2px;
box-shadow: 1px 2px 6px rgba(0,0,0,0.3);
}

a:focus {
  outline:1px dashed #E92C6C;
}

[aria-label]:hover:after, [aria-label]:focus:after {
display: block;
}

Upvotes: 4

Related Questions