CSS3实现可伸缩输入框

转载 2016年05月30日 22:38:17

html文件:

<input type="text">

css文件:

input{
    border: 1px solid #CCC;
    cursor: pointer;
    height: 30px;
    margin: 3px 0;
    text-indent:10px;
    position: relative;
    transition: width 400ms ease, background 400ms ease, border-radius 400ms ease;
    width: 100px;
    font-size: 16px;
}
input:focus{
    background-color: #fff;
    border: 2px solid #c3c0ab;
    border-radius:10px;
    cursor: text;
    outline: 0;
    width: 230px;
}

实现效果:
这里写图片描述

相关文章推荐

笔记-CSS3实现3D搜索输入框

题外话今天拜读了大漠的<>发现里面这个按钮的实例挺赞的,稍微完善了一下原来例子. 去掉一些现在不用的前缀,补全了最终版的.clearfix,还有样式稍作修改~~原版效果图: 预备知识 基础布局知识...
  • bomess
  • bomess
  • 2015-08-18 17:38
  • 1348

HTML5+CSS3+JQuery1.9 输入框切换和Div失焦模拟

Div失焦原理:判断document点击对象是否在Div容器以内,否则触发事件 需要脚本:jquery-1.9.1.js 下载地址:http://download.csdn.net/detai...

CSS3 输入框阴影效果及其他阴影效果

此处{ } CSS: form,p ( margin-bottom:30px; margin-left:20px;) .shadow,.one,.two,.three,.four,.five,.s...

【CSS3】-伸缩布局盒模型实现 3列等高布局

CSS3引入了Flexbox盒模型

css3伸缩布局实现三列固定

css3伸缩布局实现三列固定

CSS3 弹性伸缩布局(下)(20160907-0038)

新版本的 Flexbox 模型,示例

[26]CSS3 弹性伸缩布局(下)

一.新版本新版本的 Flexbox 模型是 2012 年 9 月提出的工作草案,这个草案是由 W3C 推出的最新语法。这个版本立志于指定标准,让新式的浏览器全面兼容,在未来浏览器的更新换代中实现了统一...

CSS3 弹性伸缩布局(上)(20160905-0036)

弹性伸缩布局模型,示例

[24]CSS3 弹性伸缩布局(上)

一.布局简介CSS3 提供一种崭新的布局方式:Flexbox 布局,即弹性伸缩布局模型(FlexibleBox)。用来提供一个更加有效的方式实现响应式布局。但是用于这个布局方式还处于 W3C 的草案阶...

[25]CSS3 弹性伸缩布局(中)

一.混合过渡版混合版本的 Flexbox 模型是 2011 年提出的工作草案,主要是针对 IE10 浏览器实现的伸缩布局效果,其功能和旧版本的属性大同小异。我们还是采用上一节课的文件,然后使用混合过渡...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)