Organizing search bar and buttons with CSS - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button text

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input button text

Description

Organizing search bar and buttons with CSS

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Search box</title> 
  <style>

body {<!--  w w  w .java  2  s . c om-->
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}
.searchArea {
   display: flex;
   padding: 1em 30vw 0;
   align-items: center;
   flex: 1;
}
footer {
   color: #fff;
   background: lightslategray;
   padding: 1em;
}
.playerInput {
   flex: 1;
   font-size: 1.3em;
   min-width: 300px;
   padding-left: 20px;
   height: 55px;
   border: 0;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
   background-color: rgba(34, 49, 63, 0.8);
   color: #fff;
   transition: 0.2s ease-out;
}
.playerInput:focus {
   background-color: rgba(255, 255, 255, 0.6);
   color: #111;
   transition: 0.2s ease-in;
}
button {
   border: 0;
   height: 55px;
   padding: 8px 24px;
   color: #fff;
   transition: 0.2s ease-out;
}
.upvoteButton {
   background-color: #00ab9e;
}
.downvoteButton {
   background-color: #fcce66;
}
.injuryButton {
   background-color: #fb655a;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
}
.upvoteButton:hover {
   background-color: #02ffb6;
}
.downvoteButton:hover {
   background-color: #fbf03e;
}
.injuryButton:hover {
   background-color: #fd483a;
}
.searchResults {
   display: flex;
   flex-direction: column;
}
.searchResults div {
   background: lightgray;
   border: 1px solid #666;
   border-top: 0;
   height: 55px;
   padding: 0.5em;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="searchArea"> 
   <input class="playerInput" placeholder="Search by player name"> 
   <button class="upvoteButton">A</button> 
   <button class="downvoteButton">S</button> 
   <button class="injuryButton">R</button> 
  </div>  
 </body>
</html>

Related Tutorials