material dropdown

by Samar Pattanayak

HTML

<div>
<button>
Der
</button>
</div>
<div>
  <span class='blocking-span'>
    <input type="text" class="inputText" required/>
    <span class="floating-label">Enter your name</span>
  </span>
</div>    
<div class="select-wrap">
  <label>Country</label>
  <div class="styled-select">
    <select name="color" style="width: 100%;">
    <option value="">Select</option>
    <option value="India">India</option>
    <option value="Canada">Canada</option>
    <option value="Germany">Germany</option>
  </select>
  </div>
  
</div>
<img src="https://i.postimg.cc/Yqc36Htd/mat-dropdown-caret-default.png" alt="hju">

CSS

div {
  position: relative; /*  make label relate to div  */
  padding-top: 10px;  /*  make space for label      */
}
.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
  padding-left: 8px;
  border 1px solid black;
  
}
.floating-label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 18px;
  transition: 0.2s ease all;
}
input:focus ~.floating-label,
input:not(:focus):valid ~ .floating-label {
  top: 11px;
  font-size: 11px;
  left: 9px;
}
/*dropdown*/
.select-wrap 
{
  border: 1px solid #777;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 0 5px 5px;
  width:200px;
}

.select-wrap label
{
  font-size:10px;
  color: #777;
  padding: 2px 8px 0 2px;;
}
select{
  border:0px;
  background: url('https://i.postimg.cc/Yqc36Htd/mat-dropdown-caret-default.png') no-repeat 0 0 scroll;
  -webkit-appearance:none; /* Safari and Chrome */
}
.styled-select {
  overflow: -moz-hidden-unscrollable;
  background: url('https://i.postimg.cc/Yqc36Htd/mat-dropdown-caret-default.png') no-repeat right white;
  position: relative;
  padding-top: 0px;
  
}