1、扁平化的设计风格。--淘宝

 
直接使用input。对其设置height。padding。使鼠标居中又不会占满输入框。
 

 
 
2、背景是图片的设计。--百度
 
试用span将input包裹起来。span设置背景。input设置margin。使用-webkit-appearance:none去除系统的默认样式（主要是在iphone上）。
 

文本输入框的两种div+css的写法的更多相关文章

  1. JavaWeb后台从input表单获取文本值的两种方式

    JavaWeb后台从input表单获取文本值的两种方式 #### index.html <!DOCTYPE html> <html lang="en"> & ...

  2. 鼠标经过图片时变换的两种方法--css+div及javascript应用

    javascript方式:    熟悉使用document.getElementById()取得节点对象 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  3. 两种纯CSS方式实现hover图片pop-out弹出效果

    实现原理 主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before 表示, 前景元素使用 figure img 表示,当鼠标 hover 悬浮至 fi ...

  4. 在ASP.Net中两种利用CSS实现多界面的方法

    通过使页面动态加载不同CSS实现多界面(类型于csdn的blog): 方法一: <%@page language="C#"%><%@import namespac ...

  5. WPF TextBlock 文本换行的两种方式

    第一种: <TextBlock> This is line 1.<LineBreak/> This is line 2. </TextBlock> 第二种 < ...

  6. Android Edittext聚焦时输入法挡住了EditText输入框的两种解决方案

    方案一.把整个布局文件用ScrollView套住.这样当你聚焦时虽然输入法也能够挡住一些输入框,但是你可以通过手动滑动看被挡住的内容. 方案二.在Activity中设置android:windowSo ...

  7. Mysql的两种“超过多少次”写法（力扣596）

    题目: 有一个courses 表 ,有: student (学生) 和 class (课程). 请列出所有超过或等于5名学生的课. 例如,表: +---------+------------+ | s ...

  8. 【JavaScript】两种常见JS面向对象写法

    基于构造函数 function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = function() { ...

  9. Div+Css布局教程（-）CSS必备知识

    目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...

随机推荐

  1. easyui 快速开发整理

    下面整理了关于easyui的datagrid的开发文档,复制黏贴即刻使用 1: <link href="../../Content/easyUI/themes/default/easy ...

  2. eclipse中安装genymotion

    在eclipse中安装genymotion.安装genymotion需要先安装virtualbox.选择Help选项中的install new software 然后点击进去点击ADD,在locati ...

  3. SVN 密码破解，svn密码本地找回 忘记密码

    svn 密码被保存在本地文件中 C:\Users\[your computer name]\AppData\Roaming\Subversion\auth\svn.simple 文件下. 加密保存 到 ...

  4. ORACLE中将数字转换为英文

    SELECT LEVEL, to_char(to_date(LEVEL,'J'),'Jsp') FROM dual CONNECT 运行结果如下图所示:   说明: TO_CHAR(aDate,'JS ...

  5. 导出数据库中所有数据到Excle中

    Workbook wb = new HSSFWorkbook();//创建工作簿 Connection conn = DataSourceUtils.getDataSource().getConnec ...

  6. 数学函数类方法的使用.java

    public class Test { public static void main(String[] args) { double a=2,b=3; double z1=Math.pow(a,b) ...

  7. centos上安装rabbitmq并且python测试

    把我的阿里云重置了一下,重新安装rabbitmq,看看会出现什么问题. 首先,把erlang环境安装一下,直接 yum list | grep erlang erlang.x86_64 R16B-03 ...

  8. android 巧用finish方法

    在android应用开发中,我们从一个activity跳到另一个activity时,我么要用到Intent: eg:Intent intent = new Intent(A.this,B.class) ...

  9. Eclipse formater(google Java 编码规范)

    1. 谷歌Java编码规范 http://google-styleguide.googlecode.com/svn/trunk/javaguide.html 2. 下载配置文件: https://co ...

  10. (摘)C#comboBox绑定数据

    C#中comboBox用代码绑定数据库中在某一列.用处:跟radioButton联系在一起,可以根据radioButton在选择而在comboBox显示出不同的值. private void radi ...