如何将输入框图标高度更改为居中？

Question

我的网站上有一个登录表单，如果输入失败（用户名或电子邮件已存在），可以改进输入。我开始考虑几个月前我见过的一些旧的注册表格。我开始处理一些带有颜色（边框和图标背景）和图标的输入框，如果用户名或电子邮件存在，不存在或在搜索时更改。

我有一些图标对齐方面的问题我想在不使用margin-right:-9px;的情况下将图标框一直向右移动，我还使用了字体真棒图标而不是＆＃34; X＆ ＃34;但如果我得到一些协调的帮助，这不应该证明是困难的。

有人可以查看示例并尝试更改图标和图标背景对齐吗？

http://codepen.io/AvatarRazor/pen/Eybqkp?editors=1100#0

Answer 1

由于您不想使用margin:-9px;，我尝试更改其他元素的CSS：

.inputs {
    position: relative;
    width:280px;
    padding:0px 10px; //Added this line
}

Answer 2

为了让您的工作更轻松，我刚刚将text-shadow: 6px 6px 10px black; 和padding: 10px添加到您的box-sizing: border-box;。

.usericonbox

body {font:10px verdana; color:#777f8c; cursor:default; background-color:#232428;}
body,html{min-width:780px; width:100%; height:100%; margin:0; font:13px "open sans",sans-serif;}
span {color: #05c7f7}



.inputs {
    position: relative;
	width:280px;
}
.usericonbox {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 35px;
	margin-right:-9px;
    background-color: #2af;
	color:#fff !important;
	box-sizing: border-box;
    padding: 10px;
}

.inputs input {
	background-color:#0d0f11;
    display: inline-block;
    width: 100%;
    font-size: 17px;
    margin-bottom: 15px;
	height:32px;
	padding-left:7px;
    border:1px solid black;
	outline: none;
	color:#05c7f7
}



.inputs input:active {
	border:1px solid #2af;
}

.inputs input:focus {
	border:1px solid #2af;
}