CSS: Input field and navigation menu styling

Description

Demo Code

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#navigation {<!--from   w ww. j  av  a 2 s.  c o  m-->
   left:441px;
   margin-top:81px;
   position:relative;
}

#au_title {
   color:Chartreuse;
   font-size:121%;
   font-weight:bold;
   left:516px;
   letter-spacing:3px;
   position:relative;
   text-transform:uppercase;
   top:-106px;
}

#searchInput {
   left:701px;
   position:relative;
   top:-181px;
}

#contentNav {
   color:yellow;
}

.buttonNav {
   outline:0;
   padding:6px 13px;
   display:block;
   color:blue;
   font-weight:bold;
   text-shadow:2px 2px pink;
   border:2px solid OrangeRed;
   border-radius:4px;
}

.buttonNav:hover {
   color:grey;
   background:BlueViolet;
}

.buttonNav:active {
   background-position:0 top;
   position:relative;
   top:2px;
   color:Chartreuse;
   padding:7px 13px 5px;
   background:yellow;
}

.button-list {
   list-style:none outside none;
   overflow:hidden;
}

.button-list li {
   float:left;
   margin:0 6px 0 0;
}

.button-list li.search {
   padding-left:19px;
   margin-left:11px;
   position:relative;
   list-style:none outside none;
}

* Search CSS: *
.search-input {
   padding:0 6px 0 23px;
   border:3px solid blue;
   height:31px;
   font-size:13px;
   line-height:31px;
   border-radius:26px;
   background:pink;
}

.search-input li {
   list-style:none outside none;
}

.search-submit {
   width:14px;
   height:14px;
   border:none;
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat;
   display:block;
   position:absolute;
   left:27px;
   top:11px;
   text-indent:-10000em;
}
</style> 
 </head> 
 <body> 
  <div id="header"> 
   <div class="search" style="text-align: right;"> 
    <input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');"> 
    <input type="submit" class="search-submit"> 
   </div> 
   <div id="searchInput"></div> 
   <h2>Lorem ipsum dolo</h2> 
   <div id="navigation"> 
    <ul class="button-list"> 
     <li> <a href="#" class="buttonNav">Lorem ips</a> </li> 
     <li> <a href="#" class="buttonNav">Lorem ips</a> </li> 
     <li> <a href="#" class="buttonNav">Lorem ips</a> </li> 
     <li> <a href="#" class="buttonNav">Lorem ips</a> </li> 
     <li> <a href="#" class="buttonNav">Lorem ips</a> </li> 
    </ul> 
   </div> 
  </div>  
 </body>
</html>
CSS: Input field and navigation menu styling - HTML CSS CSS Form

Description

Demo Code

Related Tutorials
