我已经尝试为一个项目创建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;
}

09-05 17:27
查看更多