关闭

CSS3实现可伸缩输入框

标签: css3
238人阅读 评论(0) 收藏 举报
分类:

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;
}

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

0
0
查看评论

CSS自动伸缩的文本输入框

CSS实现自动伸缩的文本输入框,鼠标点击的时候,文本框会自动伸长,不输入的时候恢复原样,能点小智能的感觉,希望大家喜欢。 自动伸缩的输入框 body{ background:#fff} input[type=text], input[type=password], textarea...
  • changwei07080
  • changwei07080
  • 2012-04-10 14:41
  • 1543

CSS3弹性伸缩盒子新版本

CSS3弹性伸缩布局新版本 1.开启弹性伸缩布局 display:flexbox; 2.设置布局中元素的排列方式和顺序 flex-direction 可选的参数 row 水平 column 垂直 row-reverse 水平反向 column-reverse 垂直反向 3.设置无...
  • dianbolan
  • dianbolan
  • 2016-10-09 11:14
  • 1178

Ionic-wechat项目边开发边学(四):可伸缩输入框,下拉刷新, 置顶删除

上一篇文章主要介绍了ion-list的使用, ion-popup的使用, 通过sass自定义样式, localStorage的使用, 自定义指令和服务. 这篇文章实现的功能有消息的置顶与删除, 了聊天详情页面, 可伸缩输入框, 下拉刷新聊天记录, 要介绍的知识点有: filter orderB...
  • luopeiyuan1990
  • luopeiyuan1990
  • 2016-09-23 09:39
  • 657

【CSS3】伸缩布局

CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简称为Flex。 Flexbox布局常用于设计比较复杂的页面,可以轻松的实现屏幕和浏览器窗口大小...
  • happyhaojie
  • happyhaojie
  • 2016-02-25 04:31
  • 922

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

CSS3引入了Flexbox盒模型
  • XIAOZHUXMEN
  • XIAOZHUXMEN
  • 2016-04-28 16:32
  • 3454

CSS3弹性伸缩布局盒(Flexible Box)模型

主要整理了Flexbox模型布局功能、属性术语、语法规范、各版本语法变更和新版本Flexbox模型!除此之外,还有更头疼的是浏览器兼容性,需要多次练习整理才能好好使用伸缩布局模型来解决布局问题。
  • macanfa
  • macanfa
  • 2016-07-06 19:48
  • 3880

android 实现伸缩布局效果

最近项目实现下面的图示的效果,本来想用listview+gridview实现,但是貌似挺麻烦的于是就用flowlayout 来addview实现添加伸缩的效果,实现也比较简单。 mainActivity 布局 <?xml version="1.0" encoding=&...
  • WTQ_DOMIAN
  • WTQ_DOMIAN
  • 2017-01-06 16:47
  • 633

CSS3弹性伸缩布局

◆旧版本写法: ●IE浏览器不支持●其他浏览器需要加前缀 display:-webkit-box;  //设置弹性伸缩盒模型 1.-webkit-box-orient  //主要实现盒子内部元素的流动方向 有四个值:horizontal (伸缩项目从左到右水平排列)默认值...
  • Vurtne1st
  • Vurtne1st
  • 2016-09-12 16:54
  • 233

模拟Material design实现可伸缩标题栏

开发项目需求,需要写一个可伸缩的头部。本来打算直接使用Material支持库来实现效果,Android Design Support Library 的 代码实验——几行代码,让你的 APP 变得花俏。后来发现,这个库目前不能很好的支持复杂的内容,尤其是包含多个tab的时候。Google了一下,一些...
  • hwz2311245
  • hwz2311245
  • 2015-07-14 18:50
  • 1332

Android自定义View系列之可伸缩的TextView

在写博客之前,告诉大家一个消息,我开通了自己的微信公众账号,如果你喜欢我的文章,希望关注我的微信公众号,我会定期与大家分享最新的博客文章,以及移动互联网最新动态。 我的微信公众号:yuanzeyao_android 二维码: 经常访问我博客的同学应该注意到了我的博客大部分是关于分析Androi...
  • yuanzeyao2008
  • yuanzeyao2008
  • 2015-10-13 21:40
  • 10147
    个人资料
    • 访问:492350次
    • 积分:5491
    • 等级:
    • 排名:第5799名
    • 原创:181篇
    • 转载:22篇
    • 译文:1篇
    • 评论:47条
    最新评论