Webdevelopment and Webdesign

Fantastic Search Box | Using HTML, CSS and JavaScript

HTML

CSS

html, body {
            html, body {
              margin: 0;
              padding: 0;
              background-color: #4D2F2F;
            }

.search {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              background: transparent;
              height: 40px;
            }

.search-button {
              color: transparent;
              float: right;
              width: 40px;
              height: 40px;
              background-color: transparent;
              display: flex;
              justify-content: center;
              align-items: center;
            }

#symbol {
              width: 20px;
            }

.search-text {
              border: none;
              background-color: transparent;
              outline: none;
              float: left;
              padding: 0;
              color: white;
              font-size: 16px;
              transition: 0.8s;
              line-height: 40px;
              width: 0;
              color: white;
            }

.search:hover > .search-text {
              width: 240px;
              padding: 0 6px;
            }

::placeholder {
              color: white;
              opacity: 0.5;
            }