-1

我正在阅读http://preview.python.org/的 HTML 和 CSS 代码，我有点不明白：请查看搜索框。如何实现图标搜索？我不认为它是 jpg 或 png 文件，如何制作？而且，当你聚焦输入框时，它从右向左延伸，如何实现呢？我测试了一些输入框，它不是这样的。谢谢。

4

1 回答 1

1

您可以使用 CSStransition属性完成此操作。看看下面的示例代码：

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;  
}

现场演示供参考

于 2013-07-04T10:46:36.533 回答