CSS 搜索框

最新推荐文章于 2024-02-10 11:24:33 发布
最新推荐文章于 2024-02-10 11:24:33 发布
阅读量3.5k 收藏 9
点赞数 2
分类专栏： # JavaScript 文章标签： css 前端 搜索框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14876133/article/details/128741922
版权

CSS 搜索框

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>搜索框</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.search-container {
				margin: 50px;
				display: flex;
				width: 500px;
				height: 50px;
				line-height: 50px;
			}

			.search-container input {
				box-sizing: border-box;
				flex: 1;
				height: 50px;
				line-height: 50px;
				outline: none;
				border: none;
				border-top-left-radius: 25px;
				border-bottom-left-radius: 25px;
				padding: 0 20px;
				background-color: #f8f8ff;
				border-top: 1px solid silver;
				border-left: 1px solid silver;
				border-bottom: 1px solid silver;
			}

			.search-container button {
				box-sizing: border-box;
				height: 50px;
				line-height: 50px;
				padding: 0 30px;
				border: none;
				background-color: pink;
				font-size: 24px;
				color: #fff;
				cursor: pointer;
				border-top-right-radius: 25px;
				border-bottom-right-radius: 25px;
				border-top: 1px solid silver;
				border-right: 1px solid silver;
				border-bottom: 1px solid silver;
			}
		</style>
	</head>
	<body>
		<div class="search-container">
			<input type="text" placeholder="请输入">
			<button>搜索</button>
		</div>
	</body>
</html>
xiangxiongfly915
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用CSS设计搜索框
尝试坚持
04-22 1753
<br />今天我将介绍一下如何使用CSS中的背景图片来设计你的搜索框。之前我使用别的方法来实现我的表单和搜索框，但是这种方法看起来会更容易些，所以我想将它与感兴趣的朋友分享。<br />View Demo原始方式<br />首先来让我们看看我的原始的使用<input type=”image” src=”image_url” />的方法：<formmethod="get"id="searchform"action="http://www.sohtanaka.com/" ><fieldset ><inpu
7组漂亮的纯CSS3搜索框
03-27
纯CSS3搜索框是网页设计中的一个重要元素，它利用了CSS3的新特性，如边框半径、渐变、阴影、伪类等，为用户提供美观且功能丰富的搜索体验。在这个主题下，我们将深入探讨7组不同的CSS3搜索框设计方法，它们展示了...
html纯css搜索框,分享8款纯CSS3实现的搜索框功能
weixin_39637661的博客
06-04 415
效果图：8款纯CSS3搜索框* {box-sizing: border-box;}body {margin: 0;padding: 0;background: #494A5F;font-weight: 500;font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, F...
html+css 实现搜索框
最新发布
WenZhengshi的博客
02-10 1898
搜索
HTML+CSS实现搜索框
热门推荐
BigDippers的博客
02-27 4万+
HTML+CSS实现搜索框 首先： <div class="box"> <input type="text" class="input" placeholder="请输入商品"> <!--placeholder是文本框中的提示文字--> <input type="button" value="搜索" class="button"> </div> 我们先放置一个大盒子，里面嵌套1个文本框，一个按钮。 然后我们使用css设置样式： .box{
css3 搜索栏 圆角,CSS3 圆角
weixin_29736885的博客
08-03 604
CSS3圆角一、CSS3圆角二、浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。三、CSS3 border-radius 属性使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。以下为三个实例：1. 指定背景颜色的元素圆角：2. 指定边框的元素圆角:3. 指定背景图片的元素圆角:代...
css 搜索框
lianflower的博客
08-26 542
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.3.1.min.js"></script> <style> #test { width: 270px;
HTML+CSS搜索框拼接/CSS3实现背景颜色渐变
weixin_41601794的博客
03-10 599
HTML/CSS搜索框 核心：搜索框大盒子不要加宽高，里面文本输入框与搜索的button用float拼接 <div class="search"> <input type="text" placeholder="请输入关键字"> <button></button> </div> .header .search input { float: left; padding-left: 16px; width:
html+css实现搜索框
guinue的博客
04-23 346
【代码】html+css实现搜索框。
利用CSS写精美搜索框
web$-小白
04-05 4711
利用html写搜索样式框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>8款纯CSS3搜索框</title> <link href="http://
十种最常用的css搜索框样式
09-24
你能想到的搜索框样式应有尽有！
CSS 漂亮搜索框美化代码
09-25
在这个话题中，我们将探讨如何使用CSS来美化搜索框，使它更具吸引力，提升网站的整体用户体验。 首先，我们要了解搜索框的基本结构。一个简单的搜索框通常由HTML的`<form>`标签包裹，内部包含一个输入框`...
css 教学实例 漂亮的搜索框
11-21
css教学(学生：Dream·Sky)</title> <style type=”text/css”> .search{background:url(img/searchbg.jpg);width:250px;height:37px;} /*这里之所以用两个div是为了解决float:left的时候，margin-left...
CSS3搜索框展开收缩动画特效
06-11
本知识点主要聚焦于一个特定的应用：CSS3搜索框展开收缩动画特效。这个特效将使搜索框在用户交互时展现出霓虹风格的动态效果，增强用户体验。 首先，搜索框的外观设计是关键。在这个案例中，搜索框采用了圆角样式，...
JavaScript 动画效果
xiangxiongfly
06-10 8086
文章目录JS动画实现概述平滑动画无缝连续滚动特效轮播图轮播图淡入淡出效果 JS动画实现 概述 在CSS3中可以通过transition过渡属性可以实现动画 JS可以利用CSS3中的transition属性实现元素动画 平滑动画 利用CSS transition属性实现平滑动画效果 <button>开始动画</button> <div id="box"></div> <script> var btn = document.queryS
JavaScript JSON序列化和反序列化
xiangxiongfly
01-18 6336
JSON序列化指将JSON对象转换为JSON字符串。J实现方式有两种：一种是调用JSON对象内置的`stringify()`函数，一种是为对象自定义`toJSON()`函数。 JSON反序列化指将JSON字符串转换为JSON对象。实现方式有两种：一种是使用JSON对象内置的`parse()`函数，一种是使用`eval()`函数。
JavaScript 判断元素是否包含指定class
xiangxiongfly
01-20 3734
JavaScript 判断元素是否包含指定class
JavaScript 浏览器的重排和重绘
xiangxiongfly
01-16 1903
虽然可以通过JavaScript操作DOM元素，但是代价却是高昂的。我们可以将DOM和JavaScript想象成两个岛，它们之间的连接需要通过一座桥，而JavaScript对DOM的访问就需要通过这座桥，并收取“过桥费”，随着对DOM访问次数的增加，费用也就越高，因此我们需要尽量减少“过桥”的次数，也就是减少对DOM的访问和修改，而这也是优化DOM性能的手段之一。 对DOM的修改相比于对DOM的访问，在性能上的影响会更大，这是因为它会带来浏览器的重排或重绘。
css设置搜索框样式
05-30
可以使用如下的 CSS 样式来设置搜索框的样式： ```css /* 设置搜索框样式 */ input[type="text"] { border: 1px solid #ccc; /* 设置边框样式 */ padding: 5px; /* 设置内边距 */ border-radius: 5px; /* 设置边框圆角 */ outline: none; /* 去除聚焦时的外边框 */ box-shadow: none; /* 去除聚焦时的阴影 */ } /* 设置搜索按钮样式 */ input[type="submit"] { background-color: #ccc; /* 设置背景色 */ border: none; /* 去除边框 */ padding: 5px 10px; /* 设置内边距 */ border-radius: 5px; /* 设置圆角 */ color: #fff; /* 设置文字颜色 */ cursor: pointer; /* 设置鼠标样式为手指 */ } /* 设置搜索框和按钮的容器样式 */ .search-container { margin: 10px 0; /* 设置上下外边距 */ display: flex; /* 设置为弹性盒子 */ justify-content: center; /* 设置内容居中 */ align-items: center; /* 设置垂直居中 */ } ``` 你可以根据自己的需求来修改这些样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值