精华内容
下载资源
问答
  • 一款纯CSS实现的原质化文本输入框
    2021-08-04 04:56:54

    CSS

    语言:

    CSSSCSS

    确定

    body {

    font-family: 'Open Sans', sans-serif;

    color: #9e9e9e;

    font-weight: lighter;

    }

    * {

    box-sizing: border-box;

    }

    .container {

    margin: 25px 15%;

    }

    p {

    margin-top: 15px;

    font-size: 10px;

    text-align: center;

    color: #ccc;

    }

    p b {

    color: #48cfad;

    }

    .form-item {

    position: relative;

    }

    .form-item input[type="text"] {

    display: block;

    width: 100%;

    height: 34px;

    font-size: 14px;

    line-height: 1.4;

    color: #9e9e9e;

    background-color: transparent;

    background-image: none;

    border: none;

    border-bottom: 2px solid #ddd;

    padding: 6px 12px 6px 0;

    }

    .form-item input[type="text"]:focus,

    .form-item input[type="text"]:active {

    outline: none;

    box-shadow: none;

    }

    .form-item input[type="text"]:focus ~ label:before {

    font-size: 12px;

    bottom: 34px;

    color: #48cfad;

    }

    .form-item input[type="text"]:focus ~ label:after {

    background-repeat: no-repeat;

    background-size: 1000% 1000%;

    background-image: radial-gradient(circle, #48cfad 10%, rgba(0, 0, 0, 0) 11%) !important;

    }

    .form-item input[type="text"]:not(:placeholder-shown) ~ label:before {

    font-size: 12px;

    bottom: 34px;

    }

    .form-item label:before {

    content: attr(data-label);

    display: block;

    position: absolute;

    left: 0;

    bottom: 6px;

    transition: all .15s ease-in-out;

    }

    .form-item label:after {

    content: '';

    position: absolute;

    display: inline-flex;

    text-decoration: none;

    justify-content: center;

    align-items: center;

    text-align: center;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 2px;

    transition: all 0.4s ease-in-out;

    background-position: 50%;

    background-size: 200% 200%;

    }

    更多相关内容
  • 漂亮的输入框特效,可以做为搜索页面,炫酷又实用,欢迎下载。
  • 主要为大家详细介绍了Android高级xml布局之输入框EditText设计,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Android 好看输入框特效
  • div+css助你实现漂亮的input

    千次阅读 2021-06-12 08:31:42
    前言在很多web或者app页面中,我们可以看到各种各样的输入框,从外观上看它们可以直观的看做是input元素,但是实际上并非如此。我们可以通过别的标签去模拟input标签的效果,今天我们就来看看如何使用div标签模拟...

    前言

    在很多web或者app页面中,我们可以看到各种各样的输入框,从外观上看它们可以直观的看做是input元素,但是实际上并非如此。我们可以通过别的标签去模拟input标签的效果,今天我们就来看看如何使用div标签模拟input标签的效果。

    12c98385ca0a531c08ab8adee243a33b.png

    div+css

    页面效果

    这里我们用ofo的主页面作为例子,在点击下面数字的时候,数字的内容会出现在输入框内,这个输入框就是用div模拟实现的。

    当然页面内容是静态的,只是一个简单的html,我们来看下实现后的效果。如果感兴趣的可以直接去github上去看看,源码地址:

    https://github.com/zhouxiongking/article-pages/tree/master/articles/divToInput

    334b1056bb48ab6eac43e4d411f632f4.gif

    实现效果

    显示框

    这里我们定义一个显示内容的div来模拟input,其css样式如下。

    5ce3ad3743de42122e314192f54a4250.png

    css样式

    :before

    我们使用:before伪元素来装载输入的内容,在:before元素中使用content属性来动态的元素的属性值。

    5b3818461888bd7e1e64c10c334d700d.png

    使用:before伪元素

    闪烁动作

    在input标签中,如果input元素获取焦点后,在input元素内会有光标在闪烁,这个效果我们可以通过:after伪元素来实现。

    我们会用到动画animation的知识,首先定义一个动画效果,利用opacity属性来控制显示与不显示,从而造成闪烁效果。

    d524592099c63190cf75207bffb320c2.png

    定义闪烁动作

    然后在:after伪元素中使用。

    26793049ababa5daa6aa4acd63a7d70f.png

    :after伪元素

    Javascript控制输入

    在设置好div效果后,需要在点击下面的数字时,将值显示在div中,这就需要用到Javascript去控制。

    首先获取页面上所有存在动作的元素。

    376c3530caf7e4a9384687d19d7347f6.png

    获取元素

    然后给数字和删除元素分别添加对应的事件。

    67f9ef974169c0b94c1c87ad725a6ef3.png

    元素绑定事件

    绑定事件后,在点击数字时会将值动态的显示在div中,在删除时也会相应删掉最后一个添加的元素值。

    页面设计

    对于整个页面的设计,采用了header,div和footer的布局。

    header和div的html部分代码如下。

    49ea3eb1743e5f0942455063f211d07c.png

    header与div

    相应的footer部分代码如下,其主要采用的是table布局,相对简单实用。

    c5fd2e687f237198c8f05c4ba650a86d.png

    footer部分

    至此,整个页面的实现就讲解完毕了,中间有很多的css样式部分我并没有放出来,感兴趣的可以自行去github上clone下来看看。

    总结

    今天这篇文章主要以ofo主页面实现来讲解了一下如何使用div来模拟input的效果,你有收获吗

    展开全文
  • 不说废话,先附上search输入框的成果截图: 分析:1. 组件分解:分解为如下几个部分:1)外层:增加一个容器,如div2)内层:一个input输入框一个按钮2. 设置样式:1)容器样式增加border属性,样式代码:border:solid ...

    阅读本文前,读者需要有一定的html + css的技术功底。

    不说废话,先附上search输入框的成果截图:

    0818b9ca8b590ca3270a3433284dd417.png

    分析:

    1. 组件分解:分解为如下几个部分:

    1)外层:增加一个容器,如div

    2)内层:

    一个input输入框

    一个按钮

    2. 设置样式:

    1)容器样式

    增加border属性,样式代码:

    border: solid 1px #ddd;

    增加border圆角边框,样式代码:

    border-radius: 5px

    2)输入框样式

    去除border样式:

    border: none

    去除轮廓样式:

    outline: 0 none;

    3)按钮样式

    同样,去除border样式

    border: none

    给按钮增加搜索背景图片样式:

    background-image: url("images/ico_sear.gif");

    background-repeat: no-repeat;

    设置display样式为:inline

    这样分解完,相信大家就很容易理解了。

    并附上完整实现代码:

    自制search搜索框组件

    .searchBlock{

    width: 110px;

    border:solid 1px #ddd;

    border-radius: 5px;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    -khtml-border-radius: 5px;

    }

    .searchBlock span{

    float: left;

    }

    .searchText{

    border: none;

    width: 80px;

    margin: 2px 5px;

    outline: 0 none;

    }

    .searchBtn{

    border: none;

    width: 16px;

    height: 16px;

    cursor: pointer;

    background-image: url("images/ico_sear.gif");

    background-repeat: no-repeat;

    display: inline;

    margin: 2px 0px;

    }

    搜索图片如下:

    0818b9ca8b590ca3270a3433284dd417.png

    通过这样的一个实例,我们也可以做出很多类似的组件了。

    展开全文
  • 本文分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 14种CSS3炫酷表单input输入框美化效果
  • qml 之 简约主题 --表单输入框 qml 之 简约主题 --表单输入框 import QtQuick 2.0 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 import QtQuick.Controls 1.4 Item { id:...

    qml 之 简约主题 --表单输入框

    qml 之 简约主题 --表单输入框

    TextFieldComponent.qml
    
    import QtQuick 2.0
    import QtQuick.Controls 1.4
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Controls 1.4
    
    
    
    Item {
    
        id:textFieldComponentItem
    
        property alias label: label.text
        property alias text: textFieldComponent.text
    
        property var   bindRadio: null
        property var   borderColor: textFieldComponentItem.bindRadio == null?"#696969":
                                                                       (textFieldComponentItem.bindRadio.checked?"#6495ED":"#696969")
    
        property var   borderWidth: textFieldComponentItem.bindRadio == null?1:
                                                                       (textFieldComponentItem.bindRadio.checked?2:1)
        property var   leftMargin: 20
        property var   textFieldWidth: 150
        property var   labelWidth: 150
    
    
        Text
        {
            id: label
            width: textFieldComponentItem.labelWidth
            height: 30
            font.family: "微软雅黑"
            font.pointSize: 15
            color: textFieldComponentItem.borderColor
    
        }
    
        TextField
        {
            id:textFieldComponent
            anchors.left:label.right
            anchors.leftMargin:textFieldComponentItem.leftMargin
    
            style: TextFieldStyle
            {
                textColor: "#696969"
                background: Rectangle
                {
                    radius: 5
                    implicitWidth: textFieldComponentItem.textFieldWidth
                    implicitHeight: 28
                    color:"transparent"
                    border.color: textFieldComponentItem.borderColor
                    border.width: textFieldComponentItem.borderWidth
                }
    
                font
                {
                    pointSize:12
                    family:"微软雅黑"
                }
            }
    
        }
    }
    
    
    
    main.qml
    
    import QtQuick 2.9
    import QtQuick.Window 2.2
    import "./Component"
    
    
    Window
    {
        visible: true
        width: 640
        height: 480
        title: qsTr("My Component")
    
        ButtonComponent
        {
            x:20
            y:20
            width: 120
            height: 45
            text: "按钮1"
        }
    
    
        CheckBoxComponent
        {
    
            x:170
            y:30
            text: "复选框1"
            checked: true
        }
    
        CheckBoxComponent
        {
    
            x:170
            y:60
            text: "复选框2"
            checked: false
        }
    
        ComboBoxComponent
        {
            x:200
            y:60
            model: [1,2,3,4,5,]
    
        }
    
    
        SliderControl
        {
            width: 200
            height: 20
            x:50
            y:150
            maximumValue: 10
            stepSize:1
    
        }
    
        RadioButtonComponent
        {
            width: 130
            height: 40
            x:50
            y:200
            text: "单选按钮1"
        }
    
        RadioButtonComponent
        {
            width: 130
            height: 40
            x:200
            y:200
            text: "单选按钮2"
        }
    
        TextFieldComponent
        {
            x:50
            y:300
            labelWidth:60
            label: "用户名:"
        }
    
    }
    
    

    在这里插入图片描述

    展开全文
  • 这是从github上下载下来的自定义的EditText的输入框特效,效果非常棒,下载后可以直接运行使用。
  • //创建输入框,输入框和Button一样,都是Node,有相同的设置方法 TextField text = new TextField(); text.setLayoutX(50); //设置提示,Node结点都有setTooltip方法 Tooltip tip = new Tooltip("这...
  • 超实用漂亮精美html菜单源码!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  • 1-6. Bootstrap 输入框样式汇总

    万次阅读 2019-02-11 15:05:41
    通过向 .input-group 添加相对表单大小的 class(比如 .input-group-lg、input-group-sm、input-group-xs)来改变输入框组的大小 ;"> <span class="input-group-addon">@ ...
  • H5 输入框的提示信息

    2019-06-08 01:06:28
    NULL 博文链接:https://onestopweb.iteye.com/blog/2328778
  • 主要介绍了微信小程序 input输入框控件详解及实例(多种示例)的相关资料,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,需要的朋友可以参考下
  • Xamarin.Forms默认的Entry在ios下是四周圆角样式的输入框,在安卓下是底部横线 有时候我们想自定义输入样式,比如 官方给了自定义输入框的demo,传送门:...
  • 一款漂亮的表单输入框样式

    千次阅读 2021-06-12 09:03:33
    /p>Strict//EN" ...一款漂亮的表单输入框样式*{margin:0;padding:0;}body{font-size:63%;color:#000;}.input_on{padding:2px 8px 0pt 3px;height:18px;border:1px solid...
  • 几款简单又好看的jQuery+css3输入框焦点事件动画特效,鼠标点击输入框获取焦点,里面的图标动画展示效果。 调用方法:1、在输入框中加上data-animation="slide"(动画效果,slide可以是其他的,具体参照textbox的css...
  • 最近都成为页面仔了,主要工作都放在了前段,以前总是写后台程序,对前端的一些技术 html,css,javascript ,虽然都懂一些,但要做出比较好看页面,还是有很大的差距的。最近就遇到了这样一个要求不是很高,但有点...
  • CSS3账号密码输入框动画模板,鼠标经过登录框动画效果,账号密码必须为4-16位数字或者英文字母。
  • html页面输入框input的美化

    千次阅读 2021-06-10 15:34:49
    input输入框是网页必不可少的组件,可是每个浏览器对于输入框的显示样式各有不同例如: 上图分别就是谷歌浏览器和IE浏览器自带显示的输入框,样式也不足人意,所以大多都会自己写样式以下是一个简单的文本框样式...
  • 微信小程序——好看的文字加输入框(文本框)

    千次阅读 多人点赞 2021-03-02 16:02:03
    效果图: wxml代码: <view class="view-contain-ti"> <text class="text-ti">账号</text> <input class="input1"></input> </view>... border: 3rpx soli
  • Android一个仿支付宝风格的密码输入框,功能封装比较彻底,复制即可用,欢迎下载 原博客地址 https://blog.csdn.net/Sure_Min/article/details/79054579
  • js 特效 html 特效 输入框各种效果 js 特效 html 特效 输入框各种效果
  • 制作符合用户体验的漂亮的input输入框
  • JS手机号码输入框特效
  • 输入框有字的时候,显示出清空按钮,当没有文字的时候,清空按钮隐藏。密码可以隐藏和显示密码

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,971
精华内容 2,788
关键字:

好看的输入框