I tested the below code but gain no success:
input[type="text"]:focus, input[type="password"]:focus {
outline:none;
-moz-transition: box-shadow 0.3s ease-out 0s;
background-clip: padding-box;
border: 1px solid #B6B6B6;
border-radius: 3px 3px 3px 3px;
color: #404040;
font-size: 16px;
height: auto;
line-height: 16px;
padding: 10px;
}
Is there something here I'm missing?
Opera applies a yellow outline to form inputs that have saved login information. I don't think it is possible to override it with CSS.
Instead of using outline:none; try using border:0; given outline:none ll create cross-browser problem...
add this in your css which u are using
textarea:focus {
outline-width: 0;
}
for me it worked with that addition on Opera/Safari/Chrome
input:focus {
outline: 0 none;
}
Related
I am trying to create a transition for an "a" tag using the below code (written in SASS), however, the transition doesn't seem to apply. On hover, it immediately adds the bottom border and when removing the cursor, there is a second delay before removing the border without a transition.
a {
position: absolute;
top: 1em;
left: 1em;
color: white;
font-weight: 500;
display: flex;
align-items: center;
text-decoration: none;
border-bottom: white 0px solid;
transition: all 2s ease-in-out;
&:hover {
border-bottom: white 1px solid;
}
}
Any help would be much appreciated.
The transition from 0px to 1px is just one step. If you want to let the border appear try to use the opacity of the border. Like:
border-bottom: rgba(255,255, 255,0) 1px solid;
and on hover:
border-bottom: rgba(255,255,255,1) 1px solid;
a {
position: absolute;
top: 1em;
left: 1em;
color: red;
font-weight: 500;
display: flex;
align-items: center;
text-decoration: none;
border-bottom: rgba(255,0,0,0) 1px solid;
transition: all 2s ease-in-out;
}
a:hover {
border-bottom: rgba(255,0,0,1) 1px solid;
}
A Link
trying to get my website to transition text-shadow on and off hover. When I use a transition without a specified property you can see font-size,color,etc transition. When specifying the text-shadow property in the transition no transition appears (currently using Chrome to test).
nav ul li a {
color: white;
transition: text-shadow 0.5s ease;
}
nav ul li a:hover {
color:grey;
text-shadow: 2px 2px 10px rgba(255,255,255,0.23);
}
Are you sure you are not being deceived by the lightness of your color? I have amended your code and made it a workable snippet, and if I change the color to something more explicit, like red and yellow, you can actually see the effect. It's pretty feint, though. It seems like adding that property to the default does indeed work.
body {
background: black;
}
h1, h2 {
color: white;
text-shadow: 2px 2px 10px red;
transition: text-shadow 1s ease;
z-index: 1;
position: relative;
}
h2 {
text-shadow: 2px 2px 10px transparent;
}
h1:hover,
h2:hover {
text-shadow: 2px 2px 10px yellow;
}
<h1>Hover on me for text shadow!</h1>
<h2>Hover on me for text shadow!</h2>
You need to add shadow and transition in both declarations
Try this css code
nav ul li a {
color: white;
transition: 0.5s ease;
text-shadow: 2px 2px 10px rgba(255,255,255,0);
}
nav ul li a:hover {
color:grey;
text-shadow: 2px 2px 10px rgba(255,255,255,0.23);
transition: 0.5s ease;
}
i got a problem in css . So when i remove the color from input , outline works as it has to , but when i add color:white at first it shows default outline with color white , and only then the written outline works
input {
padding: 14px;
margin-right: 20px;
background-color: #282828;
font-size: 100%;
color: lime;
outline: none;
transition: outline-color 0.5s ease-out;
border: 1px solid #282828;
}
input:focus {
outline: solid;
outline-width: 2px;
outline-color: #ff5500;
}
<input type="text" name="" id="" placeholder="Nickname..." />
check this out http://test-znaniya.ga
This happens because of this line:
transition: outline-color 0.5s ease-out;
It will transition the outline-color from the current color to the new colour (#ff5500), but you have not defined a current color, so the question is "what is the default value of outline-color ?
According to MDN in the formal definition, the initial value is
"invert, for browsers supporting it, currentColor for the other"
currentColor will be lime in the example you gave.
So to recap what is happening when you focus:
the outline is set to solid with 2px width
it's color is transitioned from lime to some kind of red
This can be easily fixed by simply adding a default value for the current-color to for example the same as the border color:
input {
padding: 14px;
margin-right: 20px;
background-color: #282828;
font-size: 100%;
color: lime;
outline: none;
outline-color: #282828;
transition: outline-color 0.5s ease-out;
border: 1px solid #282828;
}
input:focus {
outline: solid;
outline-width: 2px;
outline-color: #ff5500;
}
I customize the link. I want the border-color to depend on the color. For this I use CurrentColor.
How to make border-bottom with opacity 0.5?
a {
text-decoration: none;
color: blue;
border-bottom: 1px solid CurrentColor;
}
Some link
I have one solution, but I'm not sure that it is the best.
a {
text-decoration: none;
color: blue;
background: linear-gradient(to bottom, CurrentColor, transparent 50%) 0 100% repeat-x;
background-size: 10px 1px;
}
Some link
This solution doesn’t work.
a {
--color: blue;
text-decoration: none;
color: var(blue);
border-bottom: 1px solid rgba(var(--color), 0.5);
}
Some link
With CSS variables you need to do something like this:
a {
--color: 0,0,255;
text-decoration: none;
color: rgb(var(--color));
border-bottom: 1px solid rgba(var(--color), 0.2);
}
Some link
For the gradient solution you may create two gradients. A bottom one with the currentColor and a top one with the background color (white in this case) and adjust the opacity of the top one to control the opacity of the bottom one:
a {
text-decoration: none;
color: blue;
background-image:
linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
linear-gradient(CurrentColor, CurrentColor);
background-position:bottom;
background-size:100% 1px;
background-repeat:no-repeat;
}
Some link
You can also use pseudo-element and opacity:
a {
text-decoration: none;
color: blue;
position:relative;
}
a:after {
content:"";
position:absolute;
bottom:0;
right:0;
left:0;
height:1px;
background:currentColor;
opacity:0.2;
}
Some link
Another idea is to use box-shadow like we did with gradient by having two layers:
a {
text-decoration: none;
color: blue;
box-shadow:
0 1px 0 0 rgba(255,255,255,0.8),
0 1px 0 0 currentColor;
}
Some link
It because you set --color: blue and it not rgb color you have to set rgb color.. the a of rgba is the opacity
a {
--color: 1,1,1;
text-decoration: none;
color: var(--color);
border-bottom: 1px solid rgba(var(--color), 0.2);
}
Some link
You can convert color to rgb here:https://www.rapidtables.com/convert/color/hex-to-rgb.html
Im testing on IE Edge. This is my css code:
li.inactive{
pointer-events: none;
background: #ccc;
-webkit-filter: none;
filter:none;
opacity: 1;
cursor: not-allowed;
h1{
background: #eee;
color: #ccc;
span{
color: #ccc;
}
i{
color: #ccc;
}
}
h1:after{
border-color: transparent transparent transparent #eee;
}
}
On chrome its working but on i can hover over h1 and click on li. Any suggestion how can i fix that?
pointer-event does not work on links in IE11 and Edge unless display is set to block or inline-block. Source
A li-item is neither display:block; or display:inline-block;, unless it is specified, so to fix the issue, try this:
li.inactive{
display:block;
pointer-events: none;
background: #ccc;
-webkit-filter: none;
filter:none;
opacity: 1;
cursor: not-allowed;
h1{
background: #eee;
color: #ccc;
span{
color: #ccc;
}
i{
color: #ccc;
}
}
h1:after{
border-color: transparent transparent transparent #eee;
}
}
Simply add diplay: inline-block; to your CSS class.
Check here:
https://codepen.io/ymana/pen/yGWPWw