我已经尝试为一个项目创建android样式表,并且一些伙伴正在研究。
当我想要时,我设法使文本输入字段更改了样式。但是我无法获取相关标签来更改颜色。
这就是我要的:
你能看到标题和底线一样变粉红色吗?
<html>
<head>
<title>Experementing</title>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Roboto);
body,html
{
font-family: 'Roboto', sans-serif;
}
label
{
font-size: 10px;
color:grey;
}
label:focus
{
color:pink;
}
input
{
border-left: none;
border-top: none;
border-right: none;
border-bottom: solid grey 1px;
color:black;
width:150px;
height:auto;
background: rgba(0,0,0,0);
}
/*Changes style when input box is clicked*/
input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus
{
border-left: none;
border-top: none;
border-right: none;
border-bottom: solid pink 2px;
outline: none;
}
:focus
{
color:pink;
}
/*removes the glow from auto form fill*/
input:-webkit-autofill
{
-webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
-webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus
{
-webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
-webkit-text-fill-color: #333;
}
</style>
</head>
<body>
<form>
<div style="float:left;">
<label for="username">Username<br/>
<input type="text" name="Name" id="username"/></label>
</div>
<div style="float:left; margin-left:10px;">
<label for="pass">Password</label><br/>
<input type="password" name="Nickname" id="pass"/>
</div>
<input type="submit" value="" name="login" style="background: url(sent.svg); border:none; background-size: cover cover; width:25px; height:25px;" />
</form>
</body>
</html>
最佳答案
将<label>
放在<input>
之后,然后使用CSS兄弟选择器~
。
然后,您需要通过<label>
将<input>
直观地移回top:-4em;
上方。
jsFiddle:http://jsfiddle.net/c37eA/
截图:http://i.imgur.com/S3NDLcz.png
如果您不希望更改输入颜色(例如,您希望“ Blah”为黑色而不是粉红色),请删除规则:
:focus
{
color:pink;
}