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. C#。3.1 循环（叠加、穷举）

    循环. for 循环 嵌套的应用, 迭代.穷举 一.迭代法 每次循环都是从上次运算结果中获得数据,本次运算的结果都是要为下次运算做准备.例:1.100以内所有数的和. int sum = 0; for ...

  2. runtime error ?

    程序运行时错误(运行时出错就是出现在程序运行过程中的),有很多种: 比如:溢出.内存泄露.死循.乱用指针.数组越界(数组开小了?).除以0错误.递归太深层(系统暴栈了)

  3. HTML&CSS基础学习笔记1.13—无序列表

    无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无 ...

  4. AngularJS自定义表单验证

    <!doctype html> <html ng-app="myApp"> <head> <script src="G:\\So ...

  5. Android学习笔记--存储方案(SharedPreference、文件IO)

    1. SharedPreference SharedPreference可以很容易的保存key-value对,通常用于保存配置信息.保存的步骤 1. 获得SharedPreferences对象 (最后 ...

  6. MySQL性能分析脚本

    #!/usr/bin/python #!coding:utf-8 import mysql.connector as connector import json """ ...

  7. 二叉树的Morris遍历

    二叉树的遍历,除了上篇文章中的传统递归和使用的栈结构的非递归方式,还有如下这种Morris遍历方式,该算法的构思非常巧妙:利用前驱空闲的rightChild指针指向当前节点,形成一个环.时间复杂度和前 ...

  8. 如何在项目中使用gtest1.6

    问题 gtest1.6版本的README里说该版本不支持make install,其意思就是说你没法通过make命令把gtest安装到/usr/local/lib之类的目录,所以你也没办法通过下面的命 ...

  9. 破解官方recovery的签名验证

    步骤简述1.解包recovery.img,2.反编译/sbin/recovery,用ida64plus3.在反编译出来的文本中查找:signature 4.简单的看一下指令流程,CBZ下面是faile ...

  10. Codeforces 335B Palindrome

    http://codeforces.com/contest/335/problem/B 题意:  给定一个长度不超过5*10^4的只包含小写字母的字符串,要求你求它的回文子序列,如果存在长度为100的 ...