我正在阅读http://preview.python.org/的HTML和CSS代码，我有些不明白： 请查看搜索框。如何实现图标搜索？我不认为它是jpg或png文件， 怎么做？ 而且，当你对焦输入框时，它从右向左延伸，如何实现呢？我测试了一些输入框，它不像这样。 感谢。
答案 0 :(得分：1)
您可以使用CSS transition属性完成此操作。看看下面的示例代码：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script>
function revertBackWidth(){
console.log("calling");
document.getElementById("s").style.width="100px";
}
</script>
</head>
<body onmousedown="">
<input type="text" class="s" id="s" onchange="revertBackWidth()">
</body>
</html>
CSS：
input {
width: 100%;
padding: .65em;
margin-bottom: .875em;
border: 1px solid #caccce;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width:100px;
float:right;
position:relative;
}
.s{
-webkit-transition: width .3s ease-in-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition:width .3s ease-in-out; /* Firefox 4-15 */
-o-transition: width .3s ease-in-out; /* Opera 10.50–12.00 */
transition:width .3s ease-in-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
#s:focus
{
width:200px;
}