搜索框是现代网站上必不可少的一个元素,它不仅能够帮助网站的访问者快速找到自己需要的内容,还能增加网站的交互性。在css中,我们可以使用一些属性来设置搜索框的样式。/*设置搜索框的宽度和高度*/ inp
搜索框是现代网站上必不可少的一个元素,它不仅能够帮助网站的访问者快速找到自己需要的内容,还能增加网站的交互性。在css中,我们可以使用一些属性来设置搜索框的样式。
/*设置搜索框的宽度和高度*/ input[type="search"] { width: 300px; height: 40px; } /*设置搜索框的背景色和边框*/ input[type="search"] { background-color: #f5f5f5; border: none; border-radius: 20px; padding: 10px; } /*设置鼠标悬停时搜索框的样式*/ input[type="search"]:hover { background-color: #e3e3e3; } /*设置搜索框中的文字样式*/ input[type="search"]::placeholder { color: #999; font-size: 16px; }
以上代码中,我们使用了input[type="search"]选择器来选中搜索框,并使用width、height、background-color等属性来设置搜索框的样式。其中,border:none和border-radius:20px用于去除默认的边框并添加圆角。我们还可以使用padding属性来调整输入框内文字与边框的距离。
另外,我们还可以使用:hover伪类来设置鼠标悬停时搜索框的颜色。在搜索框中添加placeholder属性可以设置提示语,可以定制字体大小和颜色等。
总之,在css中设置搜索框非常简单,只需几行代码就可以实现一个比较漂亮的搜索框了。
粉丝
0
关注
0
收藏
0