如何设置文本框的颜色像谷歌

我是新来的网页开发。如何将文本框和文本框的颜色设置为与下图中的Google类似？如何设置文本框的颜色像谷歌

这里是我的代码：

.venu{ 
 
    width: 150px; 
 
    box-sizing: border-box; 
 
    border: 2px ridge #dadada; 
 
    border-radius: 2px; 
 
    font-size: 16px; 
 
    background-color: white; 
 
    background: url(2.png) top right no-repeat; 
 
    background-position:right; 
 
    background-size: 14px; 
 
    padding: 15px 20px 20px 45%; 
 
    position:fixed; 
 
    top:51%; 
 
    bottom:60%; 
 
    left:30%; 
 
    margin: auto; 
 
}

<input type="text" class="venv">

来源

2016-09-26 Dep

所以你wan't一个图标什么图标？我不确定我在你的html中理解你的问题 – RasmusGlenvig

，你指的是venv类的输入，但是在你的css中你选择了一个类venu。类名必须匹配。请相应地调整您的代码 –

努力并尝试帮助您期望您对建议做出反应的人。他们投入了时间和研究，所以这是一个尊重的问题。除此之外，在对SO进行研究时，没有做出反应使得整个问题和答案对其他人不那么有用。 – connexo

这里是什么，我想你想到一个简单的例子。它正在建立你已有的东西。

我只是看着一个麦克风图标，但您可以自由使用，你想

.venu { 
 
    width: 400px; 
 
    height: 40px; 
 
    box-sizing: border-box; 
 
    border: 2px ridge #dadada; 
 
    border-radius: 3px; 
 
    font-size: 16px; 
 
    padding:10px; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
} 
 

 
.venu:focus { 
 
    box-shadow: 1px 1px 10px 0.5px gray; 
 
    outline: none; 
 
} 
 

 
img { 
 
    width:25px; 
 
    position:fixed; 
 
    left: 360px; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
} 
 

 
img:hover { 
 
    transform:scale(1.05); 
 
    cursor:pointer; 
 
}

<input type="text" class="venu"><img src="https://cdn2.iconfinder.com/data/icons/social-messaging-productivity-1/128/speaker-512.png">

来源

2016-09-26 09:39:47

如何设置文本框的颜色像谷歌

回答

相关问题