样式表单输入登录
样式表单输入登录
提问于 2013-05-31 08:07:22
我想写CSS和HTML来使这个输入论坛从一个私营部门司文件
我有几个问题要问：
首先，我剪切了背景(没有其他图形元素)。标题的样式很简单。对于输入的文本，我发现很困难:当用户单击矩形时，文本和图标就会消失。
这是我的css代码：
input{
background: url('input-bg.png') no-repeat;
border: none;
width: 303px;
height: 36px;
}
#username{
background: url('user-icon.png') no-repeat left;
}
#password{
background: url('password-icon.png') no-repeat left;
}其中input-bg.png为下图：
<div id="form-login"><img id="member-icon" src="member-icon.png" />
<h2>Member login</h2>
<ul>
<li><input type="text" id="username" placeholder="User Name"/></li>
<li><input type="password" id="password" placeholder="Password" /></li>
</ul>
</div> 问题是小图标没有显示，因为输入文本的背景定义覆盖了它们。有一个简单的方法可以解决这个问题？
有没有一种简单的方法可以在右边重现光晕效果？我考虑过将z-index的值设置为比其他元素更高的效果，但如果您单击表单右侧的按钮或输入文本，显然会出现问题。有什么建议吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-05-31 11:11:08
我在想，如果它的实际上可以使这个表单在CSS widthgradient中，所以我试了一试。
结果如下：
这并不完全像图片中的形式，比特嘿！我不是网页设计师。通过一些CSS天才的改进，你可以让它看起来与图片中的一模一样。
用你想要的图标替换?图标。
HTML
<div class="container"> <!-- Unnecessary tag -->
<div class="form">
<div class="header">
Member Login
</div>
<div class="body">
<form>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<input id="rememberme" type="checkbox">
<label for="rememberme">Remember</label>
<input type="submit" value="Login Now">
</form>
</div>
</div>
</div>CSS
body {
font-family: helvetica, sans-serif;
}
@font-face {
font-family: 'icons';
src: url('icons.ttf') format('truetype');
}
div, input {
box-sizing: border-box;
}
.container {
width: 500px;
height: 350px;
padding: 35px 0;
background: -webkit-linear-gradient(left, #C2DD9A, #F5FBF0 50%, #C2DD9A);
}
.form {
width: 365px; height: 274px;
margin: auto;
background: rgba(0,0,0,.23);
padding: 2px;
}
.header {
height: 44px;
line-height: 44px;
padding-left: 30px;
font-size: 20px;
background: url('http://i.imgur.com/s0O9hy0.png') 325px center no-repeat, -webkit-linear-gradient(top, rgb(253,253,253), rgb(198,203,199));
}
form {
margin: 0 31px;
}
input[type=text], input[type=password] {
display: block;
width: 100%;
height: 38px;
padding-left: 38px;
background: url('http://i.imgur.com/s0O9hy0.png') 10px center no-repeat, -webkit-linear-gradient(45deg, #404040 0%, #404040 60%, #535353 60%, #494949);
color: #AAA;
border: 1px solid black;
transition: box-shadow .3s;
}
input[type=text]:focus, input[type=password]:focus {
outline: 0;
box-shadow: inset 0 0 8px rgba(226,239,207,.7);
}
input[type=text] { margin-top: 36px; margin-bottom: 26px; }
input[type=password] { margin-bottom: 36px; margin-top: 26px; }
input[type=checkbox] {
-webkit-appearance: none;
width: 11px; height: 11px;
border-radius: 10px;
background: rgba(0,0,0,.5);
margin: 0 5px;
}
input[type=checkbox]:checked {
background: -webkit-radial-gradient(center center, circle, white 0%, white 30%, rgba(0,0,0,.5) 50%);
}
input[type=checkbox] + label {
color: white;
font-size: 15px;
padding-bottom: 3px;
}
input[type=submit] {
float: right;
width: 134px; height: 31px;
border: 1px solid #B7DA7C;
background: url('http://i.imgur.com/s0O9hy0.png') 15px center no-repeat, -webkit-linear-gradient(top, #99CC4B, #73A52C);
font-weight: bold;
color: white;
text-align: right;
padding-right: 22px;
}
input[type=submit]:active {
box-shadow: inset 0 -3 5px rgba(0,0,0,.5);
background: -webkit-linear-gradient(top, #649126, #7DB731);
}Stack Overflow用户
发布于 2013-05-31 08:15:29
如果使用before语句呢？
input#username:before{
content: url('user-icon.png');
}http://www.w3schools.com/cssref/sel_before.asp
Stack Overflow用户
发布于 2013-05-31 08:11:50
最简单的解决方案是将图标和发光样式都添加到输入背景中(每个输入都不同)，然后在输入中添加padding。亲吻规则;)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16847851
复制相关文章
相似问题
腾讯云开发者
