css3搜索框美化

CSS3搜索框美化是一个让搜索框变得更加美观和有吸引力的方法，它可以通过一些简单的CSS代码来完成。下面，我们将会为大家介绍如何使用CSS3来美化搜索框。

/* 搜索框设置 */.search-box {
    position: relative;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
}
/* 搜索框输入框样式 */.search-box input[type="text"] {
    border: none;
    border-radius: 20px;
    background-color: #f2f2f2;
    color: #333333;
    font-size: 16px;
    padding: 0 20px;
    width: 200px;
    height: 100%;
    transition: width 0.5s ease;
}
/* 搜索框输入框聚焦时样式 */.search-box input[type="text"]:focus {
    width: 300px;
    outline: none;
}
/* 搜索框按钮样式 */.search-box button {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background-color: #f2f2f2;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.5s ease;
}
/* 搜索框按钮hover时样式 */.search-box button:hover {
    background-color: #cccccc;
}
    

以上代码展示了如何使用CSS3来美化搜索框，通过设置搜索框的位置、大小、圆角和背景色等属性，使搜索框看起来更加专业、美观同时保持了其实用性。在输入框和按钮的样式中，通过设置不同的文字颜色和背景色、字体大小、padding etc来使其看起来更加协调。

通过使用CSS3搜索框美化技术，可以为网站或移动应用程序增加更具魅力的搜索框样式。这个技术越来越成为Web开发人员的必备技能。请尽情使用这项技术，增强你的网站或应用程序的用户体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！