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. 从前有个聊天室（socket&threading）

    服务器端: # -*- coding: utf-8 -*- import socket, threading con = threading.Condition() HOST = raw_input( ...

  2. 毕业设计 ASP.Net+EasyUI开发 X X露天矿调度管理信息系统(二)

    这是本毕业设计的雏形和框架,实现的功能在左侧的功能框导航菜单内.  做的太烂,还是把学校名字给马赛克掉吧....省的挨校友批 登陆界面.. <cookie +ispostback实现记住我功能& ...

  3. （转）【已解决】关于SQL2008 “不允许保存更改。您所做的更改要求删除并重新创建以下表。您对无法重新创建的标进行了更改或者启用了‘阻止保存要求重新创建表的更改’” 解决方案

    近日在使用sql2008的过程中,要对已经创建完成的表结构进行修改,却一直提示弹出如下提示: “ 不允许保存更改.您所做的更改要求删除并重新创建以下表.您对无法重新创建的标进行了更改或者启用了“阻止保 ...

  4. RDLC 聚合函数按条件求和,显示"错误号"

    =Sum(IIf(Fields!AValue.Value >0,Val(Fields!AValue.Value),)) 一直显示错误号 修改为 =Sum(IIf(Fields!AValue.Va ...

  5. Android -------- 序列化器生成xml文件

  6. 在iOS虚拟机上使CLPlacemark获取中文信息

    -(void)locationManager:(CLLocationManager *)manager didUpdateLocations:(NSArray *)locations{ CLLocat ...

  7. 22 java常用方法

    /** * 通过正则获取该目录下满足条件的所有目录 * @param luceneFilePathRegular 正则目录,如/user/solrindex/正则表达式 * @return 满足正则表 ...

  8. （原）ubuntu下使用ftp软件

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6121663.html 参考网址: http://tieba.baidu.com/p/387426074 ...

  9. spring的CXF远程服务

    http://www.tuicool.com/articles/Rb2uUn      //远程调用  spring的cxf,亲自整合成功

  10. ecstore生成二维码

    利用phpqrcode库生成二维码: /* *二维码添加 */ ////////////////////////////////////// /*引入文件*/ @include(APP_DIR.'/i ...