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.
.
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;
}
Related
This question already has answers here:
Circle with two borders
(4 answers)
Closed 3 months ago.
I have a CSS style for a button. I don’t know how to do it. I think it’s a bit too complicated and it’s not easy to make responsive adjustments. I would like to ask everyone how to write a button like this in CSS? thanks
.save_coin {
display: inline-block;
position: relative;
z-index: 3;
}
.save_coin::after {
content: "";
display: inline-block;
position: absolute;
background: #222;
border-radius: 32px;
padding: 26px 101px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#media (max-width: 768px) {
.save_coin::after {
border-radius: 38px;
padding: 38px 102px;
}
}
.save_coin span {
display: inline-block;
font-weight: 500;
text-align: center;
background: #222;
color: #fff;
padding: 12px;
border-radius: 32px;
position: relative;
z-index: 2;
border: 1px solid #fff;
width: 192px;
}
#media (max-width: 768px) {
.save_coin span {
width: auto;
font-size: 24px;
font-weight: 700;
padding: 15px 46px;
}
}
.save_coin:hover span {
color: #222;
background-color: #fff;
}
<span>ｓａｖｅ</span>
I think you can use outline attribute, work pretty good imo.
button {
padding: 10px 30px;
border-radius: 50px;
border: 2px solid white;
background-color: black;
color: white;
outline: 2px solid black;
}
button:hover {
background-color: white;
color: black;
}
<button>save</button>
You could try the box-shadow CSS property:
button {
cursor: pointer;
outline: none;
font-size: 30px;
/* 👇 outer line */
border: 5px solid black;
/* some very large number, to get a pill effect */
border-radius: 1024px;
padding: 30px 60px 30px 60px;
background: black;
color: white;
/* 👇 inner white line */
box-shadow: inset 0 0 0 3px white;
/* custom transition */
transition: 0.3s ease;
}
/* ignore this if you just want button design */
button:hover {
background: white;
color: black;
}
<button type="button">立即儲值</button>
I'm trying to remove the yellow outline with outline: none but it's not working. I tried to put the property on every action, but with no success. Any ideas on why is not working?
.save {
background-color: #99aab5;
color: black;
text-align: center;
font-family: 'Comic Neue', cursive;
font-size: 24px;
width: 125px;
border: 1px solid #ffffff;
border-radius: 4px;
cursor: pointer;
transition: .3s;
box-shadow: 1px 4px 2px #fff;
position: absolute;
bottom: 13rem;
right: 2.7rem;
outline: none;
}
.save:hover {
color: azure;
}
.save:active {
transform: translateY(4px);
box-shadow: 0px 2px 1px;
outline: none;
}
<button type="button" class="save">Save</button>
It might not be an outline. In my experience, it can be a border or even a box shadow.
Try using this:
button{
border: none;
outline: none;
box-shadow: none;
}
if this does not work then you have to check the Chrome dev console in the element tab to see which style is causing the yellow outline.
few days ago I've asked for help with styling input type range element. Everything works just fine except one thing. Slider thumb is not displaying correctly.
My goal is to display it like this.
But this is the closest to my goal I can do.
There are two problems with that slider thumb. As you can see it's cropped and not standing out like in my goal picture. I know that it is caused by overflow : hidden. But that overflow:hidden is there on purpose ,because that is the approach I've got as a advice on my last question. Next problem is with color and box-shadow of slider thumb. I've switched it to red so it's more visible when I tried to fix the first problem. But if I switch it back to white, and try to add box shadow to it to achieve that effect which is in goal picture ,it will overwrite old box-shadow,which is making that white 'selected' effect.
Does anybody encountered this type of problem or have another solution for this ? Thank you :)
body{
background:#ccc;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
input[type='range'] {
width: 100%;
-webkit-appearance: none;
background-color: #ee7b82;
border-radius: .3em;
position: relative;
}
input[type='range']::-webkit-slider-runnable-track {
height: .35em;
border: none;
border-radius: 3px;
color: white;
overflow: hidden;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: ew-resize;
box-shadow: -100em 0 0 100em white;
-webkit-appearance: none;
border: none;
height: 1.1em;
width: 1.1em;
border-radius: 50%;
background:red;
/*
Box-shadow to slider thumb,when color is changed to white,so it'll be visible, but it rewrites old box-shadow ,which is making that selected effect.
background: white;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
*/
margin-top: -.2em;
}
input[type=range]:focus {
outline: none;
}
}
/*MOZ*/
input[type="range"]::-moz-range-progress {
background-color: white;
}
input[type="range"]::-moz-range-track {
background-color: #ee7b82;
}
/*IE*/
input[type="range"]::-ms-fill-lower {
background-color: white;
}
input[type="range"]::-ms-fill-upper {
background-color: #ee7b82;
}
<div className="range">
<p className="heading">HEIGHT</p>
<input type="range"></input>
<p className="heading">WEIGHT</p>
<input type="range"></input>
</div>
change in the CSS
input[type='range'] {
width: 100%;
-webkit-appearance: none;
background-color: #ee7b82;
border-radius: .3em;
position: relative;
max-height: 2px;
}
Please try instead,
First problem change color of thumb
By using this for different browser.
::-webkit-slider-thumb //for WebKit/Blink
::-moz-range-thumb //for Firefox
::-ms-thumb //for IE
I added box-shadow as well
box-shadow: 0px 0px 3px 2px white;
body{
background:#ccc;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
input[type='range'] {
-webkit-appearance: none;
width: 100%;
background-color: #ccc !important;
border-radius: .3em;
position: relative;
height: 1.1em;
overflow: hidden;
}
input[type='range']::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: .35em;
border: none;
border-radius: 3px;
color: white;
background:#fff;
}
input[type='range']::-moz-range-thumb{
-webkit-appearance: none;
cursor: ew-resize;
box-shadow: 0px 0px 3px 2px white;
-webkit-appearance: none;
border: none;
height: 1.1em;
width: 1.1em;
border-radius: 50%;
background:red;
margin-top: -.2em;
}
input[type='range']::-ms-thumb{
-webkit-appearance: none;
cursor: ew-resize;
box-shadow: 0px 0px 3px 2px white;
-webkit-appearance: none;
border: none;
height: 1.1em;
width: 1.1em;
border-radius: 50%;
background:red;
margin-top: -.2em;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: ew-resize;
box-shadow: 0px 0px 3px 2px white;
border: none;
height: 1.1em;
width: 1.1em;
border-radius: 50%;
background:red;
margin-top: -.35em;
}
input[type=range]:focus {
outline: none;
}
}
/*MOZ*/
input[type="range"]::-moz-range-progress {
background-color: white;
}
input[type="range"]::-moz-range-track{
background-color: #ee7b82;
}
/*IE*/
input[type="range"]::-ms-fill-lower {
background-color: white;
}
input[type="range"]::-ms-fill-upper {
background-color: #ee7b82;
}
<div className="range">
<p className="heading">HEIGHT</p>
<input type="range"></input>
<p className="heading">WEIGHT</p>
<input type="range"></input>
</div>
I have created a custom dropdown box which can be seen here: JSFIDDLE.
The lay-out is just what I wanted and within Chrome and Firefox it works perfectly. But the problems lies within IE (11,10,9,8). When you try to click on the blue arrow nothing happens. While if you click on the blue arrow in Chrome or Firefox the dropdown will open. I tried using several CSS IE hacks but with no success. Can anyone tell me if this can be fixed?
My CSS:
select\9 {
display: none;
}
select::-ms-expand {
display: none;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
text-overflow: '';
/* this is important! */
}
.custom-select {
position: relative;
overflow: hidden;
border: 1px solid #cacaca;
background-color: #fff;
border-radius: 2px;
box-shadow: inset 0 1px 1px 1px rgba(204, 204, 204, .4);
color: #0085c8;
width:200px;
}
.custom-select:after {
background-color: #fff;
border-left: 1px solid #cacaca;
content: "\25bc";
display: block;
font-size: 1em;
line-height: 1em;
padding: 11px 13px 11px 11px;
position: absolute;
right: 13px;
text-align: center;
top: 3%;
width: 0;
z-index: 2;
box-sizing: inherit;
height:100%;
/* IE */
line-height: 3em\9;
padding: 0px 13px 0px 11px\9;
right: 0px\9;
width: 10px\9;
z-index: 4\0;
}
.custom-select select {
background: 0 0;
height: 80%;
outline: 0;
width: 100%;
width: 180%\9;
font-size: 14px;
line-height:1.1em;
border: 0;
border-radius: 0;
padding: 9px 38px 9px 10px;
position: relative;
z-index: 3;
color: #0085c8;
overflow:hidden;
}
Change the CSS for .custom-select:after to match the following:
.custom-select:after {
background-color: #fff;
border-left: 1px solid #cacaca;
content: "\25bc";
display: block;
font-size: 1em;
line-height: 1em;
padding: 11px 13px 11px 11px;
position: absolute;
right: 13px;
text-align: center;
top: 3%;
width: 0;
z-index: 2;
box-sizing: inherit;
height:100%;
/* IE */
line-height: 3em\9;
padding: 0px 13px 0px 11px\9;
right: 0px\9;
width: 10px\9;
z-index: 1;
}
I want to re-declare css class style, but it's not working and I don't know why....
Maybe some description:
If user hover button, button move 1px down. But if I use button version 2 - class: button-v2, I want to disable this effect, but it doesn't works :/
Do you have any idea, how to solve it? Thank you very much :)
EDIT: When I run the snippet, it works as I want so, here is also link to real example: real example
.button {
border-radius: 3px;
border-right: none;
border-left: none;
border-top: none;
border-bottom: none;
cursor: pointer;
font-weight: 600;
position: relative;
padding: 2px 10px;
white-space: nowrap;
display: inline-block;
text-align: center;
}
.button.button-big {
padding: 12px 18px;
font-size: 110%;
}
.button:hover {
top: 1px;
}
.button:active {
top: 3px;
}
.button.button-v2:hover {
top: 0px;
}
.button.button-v2:active {
top: 0;
}
Some string
Some string