Menu
I want to disable the hover effect only when the cursor are in search position but still effect and also work on other navbar options like Home, News, Contact. See the pic. want to disable this hover effect
When i chick the search field it appear a box shadow line around the search field. How can i remove the box line shadow? For better understanding see the pic. want to remove this box line around the search filed
HTML, and CSS Codes
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: darkslategray;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px;
text-decoration: none;
}
li a:hover {
background-color: cadetblue;
}
#sty {
border: 2px solid cadetblue;
border-radius: 50px;
} <!doctype html>
<html lang="en">
<head>
<title>test</title>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-
scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Get your own code at fontawesome.com-->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<ul>
<li><a href="#home"><i class="fas fa-home"></i></a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li style="float: right;"><a id="nohvr" href="#">
<label>
<input id="sty" type="search">
</label>Search</a></li>
<li style="float: right;"><a href="#">Register</a></li>
<li style="float: right;"><a href="#">Login</a></li>
</ul>
</body>
</html>Update: When i run the code, in browser it takes little space left of that navbar in browser. How to solve it? See in pic (u see a small space left in left-side beside home icon).
428
Here is what you can do:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: darkslategray;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px;
text-decoration: none;
}
li a:hover {
background-color: cadetblue;
}
#sty {
border: 2px solid cadetblue;
border-radius: 50px;
outline: none;
}
#nohvr {
background-color: unset;
}<body>
<ul>
<li><a href="#home"><i class="fas fa-home"></i></a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li style="float: right;">
<a id="nohvr" href="#">
<label>
<input id="sty" type="search">
</label>Search</a>
</li>
<li style="float: right;"><a href="#">Register</a></li>
<li style="float: right;"><a href="#">Login</a></li>
</ul>
</body>Your #sty style should add:
outline:none;
if you want to remove this box line around the search filed.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
