zoukankan      html  css  js  c++  java
  • 在搜索框里添加放大镜的图标,且显示提示信息

    在搜素框里添加放大镜的图标

    主要是用到了

    • border-radius
    • input[type='text']
    • text-indent: 30px;
    • 和图标的相对定位
    • font-awesome一个图标css库 http://fontawesome.io/get-started/

    HTML代码

    <!DOCTYPE html>
    <html>
    <head>
    	<title>输入框加入图标且显示提示输入内容</title>
    	<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    </head>
    <body>
    <div class="search_input">
    <i class="fa fa-search" id="i-advanced-search-i"></i>
    <input type="text" id="i-advanced-search" placeholder="输入关键词检索数据库">
    </div>
    </body>
    </html>
    

      CSS代码

    	<style type="text/css">
    		.search_input input[type='text']{
    			display: inline-block;
    			 250px;
    			border-radius: 15px;
    			height: 30px;
    			text-indent: 30px;
    			border: 1px solid ;
    		}
    		.search_input input[type='text']:focus{
    			border: 0px;
    			border-color: white;
    		}
    		.search_input {
    			margin-top: 10px;
    		}
    		.search_input i{
    			position: relative;
    			left: 30px;// 这里更改图标的位置
    			// top: 1px;
    			// color: #B2B2B2;//这里可以更改图标的颜色
    		}
    
    	</style>
    

      

    如有疑问,请留言。

  • 相关阅读:
    面向对象
    ArrayList 集合
    JAVA 方法
    JAVA数组
    JAVA基础2
    JAVA基础1(语法)
    JAVA基础(jdk安装和环境变量的配置)
    数据结构练习题
    多表查询
    数据约束
  • 原文地址:https://www.cnblogs.com/ivanlee-ee-233/p/6778038.html
Copyright © 2011-2022 走看看