モバイルHTML5入力に関するFAQ（要約）

input{
    -webkit-appearance: none;
    border-radius: 0;
}

input:focus::-webkit-input-placeholder{
    opacity: 0;
}

<! -- numeric keypad With symbols, not nine-box style -->
<input type="number"/>

<! -- nine-pattern numeric keyboard -->
<input type="number" pattern="[0-9]*"/>

<! -- Phone number keypad -->
<input type="tel"/>

<form action="">
    <input type="search" />
</form>

::-webkit-input-placeholder { /* WebKit browsers */
  color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #999;
  opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #999;
  opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #999;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit*/  
    color: #666;  
}  
input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */  
    color: #666;  
}  
input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */  
    color: #666;  
}  
input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* IE 10+ */  
    color: #666;  
} 

// openNotifyReplay is the event triggered by click
openNotifyReplay = (e) => {
    this.setState({
        notifyReplayVisible: true
    }, ()=>{
        document.getElementById("replayPopupText").focus()
    })
}