How to do a right transition in css? - css

I defined a transition to my input and it applies but but it disappears without animation.
How can I make it animate while disappearing?
input {
transition: 1s;
}
input:focus {
background-color: aqua;
transition: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" autocomplete="on">
</body>
</html>


You need to define a default color for the transition to work
input{
background-color: white;
transition: 1s;
}
input:focus{
background-color: aqua;
transition: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" autocomplete="on">
</body>
</html>


There are various Approaches for that -
You just need to set default property to the input
input{
background-color: #fff;
}
input:focus{
background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" autocomplete="on">
</body>
</html>
You can use :not selector which matches every element that is NOT the specified element/selector. But this is just a approach not a correct way.
input{
transition: 1s;
}
input:focus{
background-color: aqua;
}
input:not(:focus){
background-color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" autocomplete="on">
</body>
</html>
You can use JS for mouse events like mouseenter and mouseleave.
let inputTxt = document.querySelector('input[type=text]');
inputTxt.addEventListener("mouseenter", function() {
inputTxt.style.backgroundColor = "aqua";
});
inputTxt.addEventListener("mouseleave", function() {
inputTxt.style.backgroundColor = "#fff";
});
input {
background-color: #fff;
transition: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" autocomplete="on">
</body>
</html>

Related

how can i select the 3,5 and 7th item with nth-child

I want to select the 3rd , 5th and 7th items with nth-child

element_name:nth-child(3),element_name:nth-child(5), element_name:nth-child(7)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h:nth-child(3) {
background-color: red;
color: blue;
}
h:nth-child(5) {
background-color: blue;
color: azure;
}
h:nth-child(7) {
background-color: forestgreen;
color: #000;
}
</style>
</head>
<body>
<h>heading1</h>
<h>heading2</h>
<h>heading3</h>
<h>heading4</h>
<h>heading5</h>
<h>heading6</h>
<h>heading7</h>
<h>heading8</h>
</body>
</html>

Overwriting a style with sm:

I want my borders to be on top for mobile like devices and on the left for others.
It's working on mobile but for others it's adding the properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Home</title>
</head>
<body>
<img src="https://picsum.photos/800/400" alt="login image" class="rounded-t-lg sm:rounded-l-lg">
</body>
</html>

Since you are adding rounded-t-lg without a prefix, it takes effect on all screen sizes.
To hide the top border on screens at the sm breakpoint you will have to add sm:rounded-t-none.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Home</title>
</head>
<body>
<img src="https://picsum.photos/800/400" alt="login image" class="rounded-t-lg sm:rounded-t-none sm:rounded-l-lg">
</body>
</html>

The background image in my react application is not showing

The background image in my react application is not showing!
I've applied it to the index.html file in this way:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React and Webpack4</title>
<style type="text/css">
body {
background: url("background.png");
background-size: cover;
height: 100%;
width: 100%; /* For flexibility */
}
</style>
</head>
<body>
<section id="index"></section>
</body>
</html>
However, I get the following error:
GET http://localhost:8080/background.png 404 (Not Found)

macOS Sierra CSS general sibling combinator - weird behaviour

This snippet with 'spaces' around the tilde does not work.
h3 ~ p {
color: red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
</head>
<body>
<h3>this does not work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>
This snippet without the spaces does work.
h3~p {
color: red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
</head>
<body>
<h3>this does work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>
Undo will revert to not working whereas when I put 'new' blank spaces around the tilde it works.
h3 ~ p {
color: red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
</head>
<body>
<h3>this does work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>
Since CSS in general has the power to make me want to tear my hair out it would be nice if someone could help me avoid these kinds of problems.

It's because you have a non-breaking space right after the tilde in your first example. It appears if you accidentally press option+space instead of space.
Read more here
The errors like this is a real headache sometimes!

why the words font-size are not same size in different app

this is App1 image:
this is App2 image:
note: this webpage runs in a same device(my phone with Android 5.1)
source code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"/>
<title>Document</title>
<style>
html,body{font-size:62.5%}
.div1{
font-size:2rem;
}
.div2{
font-size:20px;
}
</style>
</head>
<body>
<div class="div1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈（2rem）</div>
<div class="div2">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈（20px）</div>
</body>
</html>

Resources