实现在input框状态不同时placeholder（默认基础文字）位置不同

前段时间做路由器界面的时候的问题，现在把它们从文档一一搬过来

实现input框当不输入内容时，placeholder在左边，输入内容时，placeholder在右边
最后效果：

未焦点时：

焦点时：

实现代码：

<input type="text" class="form-control" placeholder="DNS1" >
<input type="text" class="form-control" placeholder="DNS2">

input:focus::-ms-input-placeholder{
    text-align: right;
}
input:focus::-webkit-input-placeholder{
    text-align: right;
}

:focus 选择器 用于选择获得鼠标焦点的框

因为这个是之前的问题，我构想的是我输入时作为提示文字存在，可是placeholder在input框有输入时就会消失，所以我后来是用label放提示文字实现我想要效果的

这个是我现在的成品效果：