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;
}
Related
I have a button that transitions color when I hover over it and when I click it. I would like to have a longer transition duration for the change when I click than when I hover? Is this possible?
This is my code:
.form__submit {
background-color: #f06449;
border: 2px solid #f06449;
color: white;
font-weight: bold;
width: 100%;
max-width: 240px;
padding: 12px 24px;
font-size: 20px;
transition: all 300ms ease;
}
.form__submit:hover {
border-color: white;
background-color:transparent;
}
.form__submit:active {
border-color: #f06449;
color: #f06449;
}
I couldn't find the answer anywhere online.
In your code you used transition: all 300ms ease. This means that all properties, pseudo-classes (since it is the parent), etc... will have the same transition. To do what you want to do you need to use transition in specific states, specifying the properties you want to transition (You can also use transition: all, as long as you don't use it in the parent class).
.form__submit {
background-color: #f06449;
border: 2px solid #f06449;
color: white;
font-weight: bold;
width: 100%;
max-width: 240px;
padding: 12px 24px;
font-size: 20px;
}
.form__submit:hover {
border-color: white;
background-color:transparent;
transition: border-color 300ms ease, background-color 300ms ease;
}
.form__submit:active {
border-color: #f06449;
color: #f06449;
transition: border-color 5000ms ease, background-color 5000ms ease;
}
<html>
<body>
<div class="form__submit">
</div>
</body>
</html>
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'm trying to create a hover where the button changes color while the text changes to a different color, specifically in Squarespace. I'd like the button to turn white and the text to turn black. The button changes, but the text will not change.
Here's my css:
li {
width: 190px;
padding: 8px;
background: transparent;
border: 3px solid #ffffff;
border-radius: 50px;
text-align: center;
transition: all 0.3s ease-in-out;
}
li {
vertical-align: absolute;
margin: 5px;
}
li:hover {
background: #ffffff;
transition: all 0.3s ease-in-out;
color: #000000;
}
CSS Hover Code
For some reason, when I hover over the div, the border animates properly, but mousing off of it produces no transition. What am I missing?
http://codepen.io/anon/pen/XbPbvr
HTML:
<div class="test">
Test
</div>
LESS:
.test {
background: #eee;
border-bottom: none;
width: 300px;
height: 300px;
transition: border 100ms ease-out;
&:hover {
border-bottom: 5px solid black;
transition: border 100ms ease-out;
}
}
If you truly want no border, you can animate the color to transparent and the length to 0:
.test {
background: #eee;
border-bottom: 0px solid transparent;
width: 300px;
height: 300px;
transition: border 100ms ease-out;
}
.test:hover {
border-bottom: 5px solid black;
}
<div class="test">
Test
</div>
You can't animate to border-bottom: none, change that to border-bottom: RGBA(0,0,0,0) (or perhaps border-bottom: transparent if that works).
You also don't need "transition: border 100ms ease-out" in the hover scope.
Border can't be none. Try this:
.test {
background: #eee;
border-bottom: 5px solid transparent;
width: 300px;
height: 300px;
transition: border 100ms ease-out;
&:hover {
border-bottom: 5px solid black;
transition: border 100ms ease-out;
}
}
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;
}