`
阳光暖暖
  • 浏览: 13274 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
最近访客 更多访客>>
社区版块
存档分类
最新评论

给搜索框添加漂亮的背景

阅读更多
今天看到一个关于给input添加背景的一个例子,就是很常见的搜索框后面带着一个搜索图标,所以自己也练习着做了一个。
<style>
input 
{ 
	background:url(images/1.jpg) no-repeat;
	border:none;
	height:32px;
	width:333px;
	line-height:32px;
	padding:0px 5px;
}
</style>
<input />

显示结果如下图:


如果没有设置line-height属性,文字将会出现在背景的上面,而不是合适的位置。
分享到:
评论

相关推荐

    搜索框内显示背景文字插件 for PJBlog.rar

    该插件的主要功能是在 PJBlog 博客的搜索框中添加背景文字。这不仅为用户提供了一个直观的提示,帮助用户理解搜索框的功能,而且还赋予博客更多的个性化的元素。例如,用户可以将背景文字设置为“请输入关键词进行...

    7组漂亮的纯CSS3搜索框

    第三组设计可能使用了内阴影(inset shadow)来创造一种内嵌的感觉,或者使用外阴影(outset shadow)为搜索框添加微妙的立体感,提升整体设计的质量。 CSS3的伪类选择器,如`:hover`, `:focus`, 和 `:active`,则...

    js,导航栏,和动画背景,和搜索框

    本项目涉及的核心知识点包括:导航栏(Navigation Bar)、动画背景(Animated Background)以及搜索框(Search Box)。这三部分构成了一个用户友好的、视觉吸引人的网页设计元素。 **1. 导航栏(Navigation Bar)** ...

    苹果iOS10视差背景搜索框代码.zip

    在"苹果iOS10视差背景搜索框代码.zip"这个压缩包中,包含了一个基于jQuery实现的视差背景搜索框页面模板。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互。利用jQuery...

    CSS 美化几款漂亮的网页搜索框

    - 背景颜色或图片:`background-color`或`background-image`可以改变搜索框的背景,增加纹理或图案。 - 文本颜色:`color`属性调整输入框内文字的颜色。 - 高光效果:使用`box-shadow`添加阴影,使搜索框更具立体...

    CSS和图片做漂亮搜索框

    "CSS和图片做漂亮搜索框"这个主题,就是关于如何利用这两种工具提升网站搜索框的视觉吸引力和用户体验。 首先,CSS是用于控制网页布局和样式的语言,它可以用来定义搜索框的外观,包括边框、背景色、字体样式、尺寸...

    搜索列表,点击搜索框,显示灰色的背景

    在iOS应用开发中,"搜索列表,点击搜索框,显示灰色的背景"这一现象通常涉及到`UISearchBar`和`UISearchDisplayController`的使用。这两个是苹果提供的UI组件,用于实现用户界面中的搜索功能。在这里,我们将深入...

    QQ空间怎么添加背景音乐?QQ空间添加背景音乐教程.docx

    而为QQ空间添加背景音乐,正是实现个性化的有效途径之一。本文将详细介绍如何免费为QQ空间添加背景音乐的步骤,帮助用户轻松打造一个具有独特魅力的个人空间。 首先,开始操作之前,请确保您已经登录到自己的QQ空间...

    jQuery带视差背景的搜索框页面代码

    **jQuery带视差背景的搜索框页面代码**是一种在网页设计中常见的技术,它结合了jQuery库的强大功能和视差效果的视觉吸引力,为用户提供了一种动态且引人入胜的交互体验。在这个主题中,我们将深入探讨jQuery、搜索框...

    百度搜索框源代码程序源码

    2. **CSS**:为了让搜索框适应不同的风格和颜色匹配,CSS可以用来定制搜索框的外观,如边框、背景色、字体、按钮样式等。例如: ```css input[type=text] { width: 300px; padding: 12px 20px; margin: 8px 0; ...

    IOS自定义搜索框

    1. **外观设计**:调整搜索框的边框颜色、背景色、占位符颜色和字体样式等,使其与应用的整体风格保持一致。这可以通过设置UISearchBar的属性,如`tintColor`、`barTintColor`、`searchTextField`等来实现。 2. **...

    可伸缩搜索框

    CSS用于定义搜索框的初始样式,包括尺寸、边框、背景色等,而JavaScript则负责监听用户的点击事件,动态改变搜索框的大小。 JavaScript中,我们可以使用`addEventListener`方法监听`click`事件。当搜索框被点击时,...

    仿腾讯网搜索框

    3. **清除按钮**:当用户输入内容后,搜索框右侧常会出现一个用于清除输入的图标,这可以通过CSS和JavaScript实现,监听用户的输入事件并动态添加或隐藏该按钮。 4. **聚焦效果**:当鼠标焦点落在搜索框上时,通常...

    android关键字搜索框

    在Android应用开发中,搜索框(SearchView)是用户界面中的一个重要组成部分,它允许用户输入查询关键词,以便在应用内进行搜索。本教程资源由欧小帅于2016年10-2日创建,旨在帮助新手学习如何在Android Studio环境...

    Android通用的搜索框源码

    1. **可定制性**:为了适应不同的UI设计和功能需求,搜索框需要具有高度的可定制性,包括但不限于搜索图标、文字提示、背景颜色等。 2. **实时搜索**:搜索框应支持实时搜索功能,即当用户在输入框中键入字符时,...

    CSS样式搜索框美化系列

    `field-bg.gif`和`paper-bg.jpg`是背景图像文件,常用来为搜索框添加纹理或色彩,提升视觉效果。例如,`field-bg.gif`可能被用作搜索框的输入区域背景,而`paper-bg.jpg`可能作为整体页面的背景,营造出一种纸张质感...

    仿bilibili搜索框效果

    4. **动画效果**:Bilibili的搜索框在聚焦和失去焦点时可能会有动画效果,如背景颜色变化、边框样式调整等,增加视觉吸引力。这些效果可以通过CSS3的transition和animation属性实现。 5. **图标与文字结合**:搜索...

    zencart模板修改定制笔记10:给边框加漂亮的背景图片

    ### zencart模板修改定制笔记10:给边框加漂亮的背景图片 #### 知识点一:Zencart概述与应用领域 Zencart是一款非常受欢迎的开源电子商务平台,它基于PHP语言和MySQL数据库构建,能够帮助用户快速搭建功能完善的...

    移动端H5实现搜索框样式源码

    在移动端H5应用中,创建一个美观且功能齐全的搜索框是提升用户体验的关键步骤。本文将深入探讨如何使用HTML5、CSS3以及JavaScript来实现一个交互式的搜索框样式。我们将从以下几个方面进行讨论: 1. **HTML结构**:...

    仿新浪搜索框

    2. **边框和背景**:使用`border`属性可以添加边框,`background-color`或`background-image`可以定义背景色或图片,从而实现新浪搜索框的外观特征。 3. **内边距和外边距**:`padding`用于控制元素内部空间,`...

Global site tag (gtag.js) - Google Analytics