在这篇文章里,我们来学习一下如何使用CSS来制作酷狗搜索框。
<form action="search.PHP"></form>
<form action="search.PHP"> <input type="text" name="keyword"> <input type="submit" value="搜索"> </form>
现在,我们需要使用CSS来为这个表单添加样式。首先,为表单设置一些基本属性:
form { width: 400px; margin: 0 auto; text-align: center; }
这将使表单居中显示,并设置宽度为400像素。接下来,我们需要为文本输入框和提交按钮添加一些样式:
input[type="text"] { width: 300px; padding: 10px; border: none; border-radius: 20px; outline: none; font-size: 16px; } input[type="submit"] { width: 80px; height: 40px; margin-left: -4px; background-color: #31C27C; color: #fff; border: none; border-radius: 20px; font-size: 16px; cursor: pointer; }
这将为输入框添加圆角边框、内边距和字体大小,并去掉默认的边框。提交按钮将增加背景颜色、圆角边框和样式。
最后,我们需要为输入框添加hover效果,以便在鼠标悬停时改变样式:
input[type="text"]:hover { background-color: #F0F0F0; }
这将改变输入框的背景颜色为灰色,并在悬停时出现。
<form action="search.PHP"> <input type="text" name="keyword"> <input type="submit" value="搜索"> </form> <style> form { width: 400px; margin: 0 auto; text-align: center; } input[type="text"] { width: 300px; padding: 10px; border: none; border-radius: 20px; outline: none; font-size: 16px; } input[type="submit"] { width: 80px; height: 40px; margin-left: -4px; background-color: #31C27C; color: #fff; border: none; border-radius: 20px; font-size: 16px; cursor: pointer; } input[type="text"]:hover { background-color: #F0F0F0; } </style>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。