JSFiddle - React, Tailwind, and code Playground

by firegroove

HTML

<input type="search" value="Search"/>
<br/>
<input type="number" value="55" min="0" max="100" step="5" />

CSS

input {
    display:block;
    padding: 2px;
}

input:focus {
    outline-color: #236DCD;
}

input[type=search] {
    color: #236DCD;
    border-radius: 4px;
}

input[type=search]::-webkit-search-cancel-button  {
    -webkit-appearance: none;
    position:relative;
    height: 16px;
    width: 16px;
    background: #d5d5d5;
    color:#fff;
    font-size: 1.1em;
    text-shadow: 0 1px 0 #666;
    border-radius: 50%;
    margin:0;
    cursor:pointer;
    box-shadow: inset 0 2px 5px -2px #666; 
}

input[type=search]::-webkit-search-cancel-button:hover {
    background: #aaa;
}

input[type=search]::-webkit-search-cancel-button:active {
    background: #f99;
}

input[type=search]::-webkit-search-cancel-button:before {
    content: "×";
    position:absolute;
    top:0px;
    right:3px;
}

input[type=number]::-webkit-inner-spin-button { 
    -webkit-appearance: none;
    cursor:pointer;
    display:block;
    width:8px;
    color: #333;
    text-align:center;
    position:relative;
}

input[type=number]::-webkit-inner-spin-button:hover { 
    color: #236DCD;
}

input[type=number]::-webkit-inner-spin-button:before,
input[type=number]::-webkit-inner-spin-button:after {
    content: "^";
    position:absolute;
    right: 0;
    font-family:monospace;
    line-height:
}

input[type=number]::-webkit-inner-spin-button:before {
    top:0px;
}

input[type=number]::-webkit-inner-spin-button:after {
    bottom:0px;
    -webkit-transform: rotate(180deg);
}