CSS中输入框(搜索框)的实现技巧

我们都知道在一般网站上出现的输入框里都会有各种各样的图标、文字等样式。那么如何实现input输入框中插入图标呢?一般的方法是:用定位将需要的图标用定位的方式实现,这种方式虽然可以实现,但是如果我们需要插入的不止一个图标呢?那还用定位的话,工作量可能就要加大许多了。下面小编推荐一个方法,列表法:将整个input输入框看作一个列表ul,而其中的各种样式则可以看作单个项目li。将原本input输入框的边框样式设置为列表ul的边框样式就可实现input输入框的边框样式,而各个图标之类的样式可直接插入li中,还能设置单独的样式,修改起来也更加方便。

时间: 2024-12-24 06:13:46

CSS中输入框(搜索框)的实现技巧的相关文章

iOS中UISearchBar(搜索框)使用总结

iOS中UISearchBar(搜索框)使用总结 初始化:UISearchBar继承于UIView,我们可以像创建View那样创建searchBar     UISearchBar * bar = [[UISearchBar alloc]initWithFrame:CGRectMake(20, 100, 250, 40)];     [self.view addSubview:bar]; @property(nonatomic)        UIBarStyle              ba

如何在WordPress菜单中添加搜索框?

如何在WordPress菜单中添加搜索框?且不需要不使用任何WordPress插件. 想要达到这种效果只需按照以下步骤相同. 如何在WordPress菜单中添加搜索框: WordPress菜单中添加搜索框 打开functions.php文件,并在文件末尾的代码片段下面复制粘贴并保存.以下代码将自动将搜索框添加到主菜单栏. /** * Add searchbox in menubar */ add_filter( 'wp_nav_menu_items','add_search_box', 10,

HTML/CSS实现的搜索框

谷歌和百度首页的搜索框都是<input>+<button>模式的,bing的搜索框感觉要好点儿.简言之,就是将提交按钮放到<input>中,其实这是做不到的,只能伪装.?1. [代码]主要源代码     <html>  <head><title>掬一捧|搜索框的实现</title><meta charset="UTF-8"><style type="text/css"

详细解读Android中的搜索框—— SearchView

以前总是自己写的 今天看看别人做的 本篇讲的是如何用searchView实现搜索框,其实原理和之前的没啥差别,也算是个复习吧. 一.Manifest.xml 这里我用一个activity进行信息的输入和展示,配置方式还是老样子,写一个输入框的配置文件,然后写定一个action <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.and

详细解读Android中的搜索框(三)—— SearchView

本篇讲的是如何用searchView实现搜索框,其实原理和之前的没啥差别,也算是个复习吧. 一.Manifest.xml 这里我用一个activity进行信息的输入和展示,配置方式还是老样子,写一个输入框的配置文件,然后写定一个action <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/a

纯html+css中实现静态选座位效果技巧(input+label使用小技巧)

很多时候,我们想通过html+css的方式实现排列在后方的代码在选中状态下,能控制排列在前的代码的样式.那么要怎么实现呢?在这里我就要用1个小技巧来完成. 众所周知的,我们css中的选择器通常只能向下或者同级向下选中,而不能向上选中,这样就对于想控制前面样式的时候带来麻烦.input+label关联的方式即可实现,因为input和label是通过id值来进行关联的,而html中规定了,id值必须唯一,那么我将input放置在html的body下的任意位置,均可实现关联,所以为了实现后方代码控制前

Android中的搜索框(SearchView)的功能和用法

1.SearchView是搜索框组件,它可以让用户在文本框里输入文字,通过监听器取得用户的输入,当用户点击搜索时,监听器执行实际的搜索. 2.SearchView组件的常用方法如下: ①setIconifiedByDefault(boolean iconified) ===> 设置搜索框默认是否自动缩小为图标. ②setOnQueryTextListener(SearchView,OnQueryTextListener listener) ===> 为搜索框设置监听器 ③setSubmitBu

详细解读Android中的搜索框(四)—— Searchable配置文件

<?xml version="1.0" encoding="utf-8"?> <searchable xmlns:android="http://schemas.android.com/apk/res/android" android:label="string resource" android:hint="string resource" android:searchMode=[&qu

网页中制作搜索框中遇到一些小问题

当你在制作一个搜索框加按钮的时候,比如<input class="header-text"/><input type="button" class="header-button"/>这样放置,文本框和按钮不管你怎么调样式也不在同一个位置,这个时候解决方式有两种: 1.外边包一层div,让文本框和按钮float:left,此时文本框和按钮都会紧贴div,也就会出现在同一水平线上的效果 2.待搜索