精华内容
下载资源
问答
  • 2021-04-21 12:07:35

    前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的)。

    layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer。 具体请移步layer官网,http://www.layui.com/doc/modules/layer.html

    这篇博客会引用官网的一些内容,主要是写写layer的一些难点。比如如何用layer打开一个新的网页,content直接为一个网址就可以了,但是在你的项目中,这个网址又是啥??HTML的直接路径? 相对路径??都不是!! layer如何获取父界面的元素,比如我点击新增按钮,在layer框编辑后提交,是如何关闭当前layer框,额,关闭layer框很简单,但是如何关闭后根据父界面的form表单向后台发起Ajax请求,,刷新信息。即:layer子界面如何调用父界面的方法。

    如果你不想使用Layui,而只是想使用layer,你可以去layer独立组件官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js。

    //弹出一个页面层

    $('#test2').on('click', function(){

    layer.open({

    type: 1,

    area: ['600px', '360px'],

    shadeClose: true, //点击遮罩关闭

    content: '\自定义内容\'

    });

    });

    title - 标题

    类型:String/Array/Boolean,默认:'信息'

    title支持三种类型的值,若你传入的是普通的字符串,如title :'我是标题',那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: ['文本', 'font-size:18px;'],数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false

    content - 内容

    类型:String/DOM/Array,默认:''

    content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。譬如:

    /!*

    如果是页面层

    */

    layer.open({

    type: 1,

    content: '传入任意的文本或html' //这里content是一个普通的String

    });

    layer.open({

    type: 1,

    content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响

    });

    //Ajax获取

    $.post('url', {}, function(str){

    layer.open({

    type: 1,

    content: str //注意,如果str是object,那么需要字符拼接。

    });

    });

    /!*

    如果是iframe层

    */

    layer.open({

    type: 2,

    content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']

    });

    /!*

    如果是用layer.open执行tips层

    */

    layer.open({

    type: 4,

    content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM

    });

    btn - 按钮

    类型:String/Array,默认:'确认'

    信息框模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。当您只想自定义一个按钮时,你可以btn: '我知道了',当你要定义两个按钮时,你可以btn: ['yes', 'no']。当然,你也可以定义更多按钮,比如:btn: ['按钮1', '按钮2', '按钮3', …],按钮1的回调是yes,而从按钮2开始,则回调为btn2: function(){},以此类推。如:

    //eg1

    layer.confirm('纳尼?', {

    btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮

    ,btn3: function(index, layero){

    //按钮【按钮三】的回调

    }

    }, function(index, layero){

    //按钮【按钮一】的回调

    }, function(index){

    //按钮【按钮二】的回调

    });

    //eg2

    layer.open({

    content: 'test'

    ,btn: ['按钮一', '按钮二', '按钮三']

    ,yes: function(index, layero){

    //按钮【按钮一】的回调

    }

    ,btn2: function(index, layero){

    //按钮【按钮二】的回调

    //return false 开启该代码可禁止点击该按钮关闭

    }

    ,btn3: function(index, layero){

    //按钮【按钮三】的回调

    //return false 开启该代码可禁止点击该按钮关闭

    }

    ,cancel: function(){

    //右上角关闭回调

    //return false 开启该代码可禁止点击该按钮关闭

    }

    });

    success - 层弹出后的成功回调方法

    类型:Function,默认:null

    当你需要在层创建完毕时即执行一些语句,可以通过该回调。success会携带两个参数,分别是当前层DOM当前层索引。如:

    layer.open({

    content: '测试回调',

    success: function(layero, index){

    console.log(layero, index);

    }

    });

    yes -确定按钮回调方法

    类型:Function,默认:null

    该回调携带两个参数,分别为当前层索引、当前层DOM对象。如:

    layer.open({

    content: '测试回调',

    yes: function(index, layero){

    //do something

    layer.close(index); //如果设定了yes回调,需进行手工关闭

    }

    });

    cancel - 右上角关闭按钮触发的回调

    类型:Function,默认:null

    该回调携带两个参数,分别为:当前层索引参数(index)、当前层的DOM对象(layero),默认会自动触发关闭。如果不想关闭,return false即可,如;

    cancel: function(index, layero){

    if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭

    layer.close(index)

    }

    return false;

    }

    end - 层销毁后触发的回调

    类型:Function,默认:null

    无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数。

    layer.ready(callback) - 初始化就绪

    由于我们的layer内置了轻量级加载器,所以你根本不需要单独引入css等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层时,你最好是将弹层放入ready方法中,如:

    //页面一打开就执行弹层

    layer.ready(function(){

    layer.msg('很高兴一开场就见到你');

    });

    layer.close(index) - 关闭特定层(比较重要)

    关于它似乎没有太多介绍的必要,唯一让你疑惑的,可能就是这个index了吧。事实上它非常容易得到。

    //当你想关闭当前页的某个层时

    var index = layer.open();

    var index = layer.alert();

    var index = layer.load();

    var index = layer.tips();

    //正如你看到的,每一种弹层调用方式,都会返回一个index

    layer.close(index); //此时你只需要把获得的index,轻轻地赋予layer.close即可

    //如果你想关闭最新弹出的层,直接获取layer.index即可

    layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的

    //当你在iframe页面关闭自身时

    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

    parent.layer.close(index); //再执行关闭

    layer.getChildFrame(selector, index) - 获取iframe页的DOM

    当你试图在当前页获取iframe页的DOM元素时,你可以用此方法。selector即iframe页的选择器

    layer.open({

    type: 2,

    content: 'test/iframe.html',

    success: function(layero, index){

    var body = layer.getChildFrame('body', index);

    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();

    console.log(body.html()) //得到iframe页的body内容

    body.find('input').val('Hi,我是从父页来的')

    }

    });

    layer.getFrameIndex(windowName) - 获取特定iframe层的索引

    此方法一般用于在iframe页关闭自身时用到。

    //假设这是iframe页

    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

    parent.layer.close(index); //再执行关闭

    封装好的Layer弹出框与关闭layer弹出框的方法(代码周一给出, 现在手头没有代码)

    总结

    以上所述是小编给大家介绍的详解Layer弹出层样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    更多相关内容
  • 在form表单里添加一个Button按钮点击事件,调用layer弹框,奇怪的是layer立即关闭,关闭之后会刷新一下界面,实在是找不到什么问题呀?求助~~~~~~~~ ------------把主要的代码贴出来------------ <!DOCTYPE html> ...
  • 自定义登录表单样式

    2020-09-28 22:38:10
    我们将从为表单元素本身提供一些样式开始。 表单是演示的主要包装器,因此我们给它一个宽度,并用margin声明居中。 .form-1 { /* Size & position */ width: 300px; margin: 60px auto 30px; padding: 10px; ...
    Custom Login Form Styling

    Hi guys! I’m back with another CSS tutorial! After button switches and drop-down lists, let’s create some forms. In particular, we will be creating login forms. Nowadays, almost every web service, application, game etc. allows (or even requires) user subscription, which means they all need some kind of form for users to register and sign in. With this in mind, I tried to create a few different login forms, some of which are inspired by design concepts on the web. The aim was to give some particularity to each of them.

    嗨,大家好! 我回来了另一个CSS教程! 在按钮切换和下拉列表之后,让我们创建一些表单。 特别是,我们将创建登录表单。 如今,几乎每个Web服务,应用程序,游戏等都允许(甚至要求)用户订阅,这意味着他们都需要某种形式的用户注册和登录。为此,我尝试创建一些不同的形式。登录表单,其中一些是受Web设计概念启发的。 目的是给他们每个人一些特殊性。

    A few things before starting:

    开始之前的几件事:

    • You won’t see any vendor prefixes in the CSS snippets, but you will, of course, find them in the files.

      您不会在CSS片段中看到任何供应商前缀,但是您当然会在文件中找到它们。
    • The goal of the tutorial is to show the potential of CSS, particularly CSS3, that’s why the rendering could be altered on IE8-. If you plan to support these browsers, be sure to make fallbacks.

      本教程的目的是展示CSS的潜力,尤其是CSS3,这就是为什么可以在IE8-上更改渲染的原因。 如果您打算支持这些浏览器,请确保进行回退。
    • I didn’t use any attribute on the form tag as action, method since I’m focusing on the design.

      因为我专注于设计,所以我没有在form标签上使用任何属性作为actionmethod

    • I personally use the box-model where [width] = [element-width] + [padding] + [borders]. I activate it with the following snippet:

      我个人使用[[width] = [element-width] + [padding] + [borders]的盒子模型。 我使用以下代码段激活它:
    
    	*,
    	*:after,
    	*:before {
    		box-sizing: border-box;
    	}
    
    

    关于用户友好性(A word about user-friendliness)

    You need forms for many occasions where interaction between the user and your application or website is necessary: login, comments, contact, feedback, and more. If you mess with a form, you mess with your user. With that in mind, there are a couple things you can do to make your forms better, more user-friendly. Let’s make a little round up together, shall we?

    在许多需要用户与您的应用程序或网站进行交互的场合,您需要使用表单:登录,评论,联系方式,反馈等等。 如果您搞砸了表单,那么您就和您的用户搞混了。 考虑到这一点,您可以做一些事情来使您的表单更好,更友好。 让我们一起凑一下吧?

    • Labels: Labels are important. I am not talking about the label tag, I am talking about an indication about the point of a field. Let’s make things clear: all fields are the same. It is because they have labels the user knows what to write in which field. Use labels, or icons, or whatever is needed to make the user understand what he has to do.

      标签:标签很重要。 我不是在谈论标签,而是在谈论关于某个领域的观点。 让我们澄清一下:所有字段都相同。 这是因为它们具有标签,用户知道在哪个字段中写什么。 使用标签或图标,或使用户了解自己所需要做的一切。

    • Fields:: The nicer your inputs are, the more pleasant they are to look at, the happier your user will be. Make space around and in your inputs. Don’t make the field wedge its content. Inputs should be big enough to show their average whole content. Don’t make tiny little fields forcing users to navigate in them with arrow keys.

      字段::您的输入越好,输入越令人愉悦,您的用户就会越快乐。 在输入周围和内部留出空间。 不要让字段限制其内容。 输入内容应足够大以显示其平均整体内容。 不要在很小的小字段中强迫用户使用箭头键在其中导航。

    • Labels + fields: Make links between the inputs and their label. Use the for attribute on labels. Clicking on a textarea is easy, even on a mobile device. Clicking on a checkbox however can be tricky, especially when it comes to mobile navigation. Making the label clickable makes your user’s life easier. Use it. Make inputs large enough for the mobile view, where the label might not be clickable.

      标签+字段:在输入及其标签之间建立链接。 在标签上使用for属性。 即使在移动设备上,单击文本区域也很容易。 但是,单击复选框可能会很棘手,尤其是在移动导航方面。 使标签可点击可简化用户的生活。 用它。 使输入足够大以用于移动视图,在该视图中可能无法单击标签。

    • States: CSS allows the targeting of an element according to its current state: hovered, focused, active, default, etc. It’s important to show the user he’s hovering something clickable, or focusing something he can fill.

      状态: CSS允许根据元素的当前状态(悬停,已聚焦,活动,默认等)来定位元素。向用户显示他正在悬停可单击的内容或集中其可填充的内容非常重要。

    • Submit button: The submit button is the last step for your user to complete the form and interact with your application. It should be visible. Remember “call-to-action”. Don’t use the default style for a submit button, make something pretty! And don’t never ever use “Submit”. It’s indistinct. If it’s a login form, use “Sign in” or “Log in”. If it’s a comment form, use something like “Post comment”. Tell the user what action will be performed.

      提交按钮:提交按钮是用户完成表单并与您的应用程序进行交互的最后一步。 它应该是可见的。 记住“号召性用语”。 不要为提交按钮使用默认样式,做一些漂亮的事情! 而且永远不要使用“提交”。 不清楚。 如果是登录表单,请使用“登录”或“登录”。 如果是评论表单,请使用“发表评论”之类的内容。 告诉用户将要执行的操作。

    • HTML5 inputs and attributes: HTML5 provides a lot of useful new attributes and inputs in order to make forms nicer and easier to fill. Use those attributes and inputs when needed, with fallbacks of course. More about this on Wufoo.

      HTML5输入和属性: HTML5提供了许多有用的新属性和输入,以使表单更美观,更容易填写。 在需要时使用这些属性和输入,当然还有备用。 关于Wufoo的更多信息。

    Now we have covered the basics, let’s create some forms my friends!

    现在我们已经介绍了基础知识,让我们为我的朋友们创建一些表格!

    例子1 (Example 1)

    CustomLoginForms_01

    As I said earlier, I tried to make every form different from the others with its own particularity. This one relies on its submit button, kind of “out of the screen”, and rounded.

    就像我之前说的,我试图使每种形式都有自己的特殊性。 这依赖于它的“提交”按钮,有点像“屏幕外”,并且四舍五入。

    标记 (The Markup)

    
    <form class="form-1">
    	<p class="field">
    		<input type="text" name="login" placeholder="Username or email">
    		<i class="icon-user icon-large"></i>
    	</p>
    		<p class="field">
      		<input type="password" name="password" placeholder="Password">
      		<i class="icon-lock icon-large"></i>
    	</p>        
    	<p class="submit">
        	<button type="submit" name="submit"><i class="icon-arrow-right icon-large"></i></button>
    	</p>
    </form>
    
    

    Okay, so this first example is pretty minimal, meaning we won’t use any labels. But, we of course need to tell our user what they have to write in those fields, so we use … icons. Those are the little <i/> tags. Note: as usual, I will not cover here how to use an icon font like FontAwesome. If you’d like to learn more about it, you can check out the examples on their website. Basically, we have two containers wrapping an input and an icon. The submit button is in its own container, and we use a <button/> instead of an <input/> with an icon inside. We will also employ placeholders to make things even more clear for supported browsers. More information on the browser support for the placeholder attribute can be found on CanIUse.com.

    好的,因此第一个示例非常少,这意味着我们将不使用任何标签。 但是,我们当然需要告诉我们的用户他们在这些字段中必须写什么,因此我们使用…图标。 这些是小<i/>标签。 注意:和往常一样,我不会在这里介绍如何使用诸如FontAwesome之类的图标字体。 如果您想了解更多信息,可以在其网站上查看示例 基本上,我们有两个包装输入和图标的容器。 提交按钮位于其自己的容器中,我们使用<button/>而不是带有图标的<input/> 。 我们还将聘用占位符,以使支持的浏览器更加清晰。 可以在CanIUse.com上找到有关占位符属性的浏览器支持的更多信息。

    CSS (The CSS)

    We will start by giving some styles to the form element itself. The form is the main wrapper for our demos, so we give it a width and center it with the margin declaration.

    我们将从为表单元素本身提供一些样式开始。 表单是演示的主要包装器,因此我们给它一个宽度,并用margin声明居中。

    
    .form-1 {
        /* Size & position */
        width: 300px;
        margin: 60px auto 30px;
        padding: 10px;
        position: relative; /* For the submit button positioning */
    
        /* Styles */
        box-shadow: 
            0 0 1px rgba(0, 0, 0, 0.3), 
            0 3px 7px rgba(0, 0, 0, 0.3), 
            inset 0 1px rgba(255,255,255,1),
            inset 0 -3px 2px rgba(0,0,0,0.25);
        border-radius: 5px;
        background: linear-gradient(#eeefef, #ffffff 10%);
    }
    
    .form-1 .field {
        position: relative; /* For the icon positioning */
    }
    
    

    Important: we set it to position relative in order to place the submit button absolutely. We do the same for the .field containers to place the icons absolutely as well. Speaking of icons, let’s deal with it now.

    重要提示:我们将其设置为相对位置,以便绝对放置“提交”按钮。 我们对.field容器也进行同样的操作,以完全放置图标。 说到图标,让我们现在处理它。

    
    .form-1 .field i {
        /* Size and position */
        left: 0px;
        top: 0px;
        position: absolute;
        height: 36px;
        width: 36px;
    
        /* Line */
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);
    
        /* Styles */
        color: #777777;
        text-align: center;
        line-height: 42px;
        transition: all 0.3s ease-out;
        pointer-events: none;
    }
    
    

    We add a subtle line on the right side of the icon by setting a right border and a box shadow. Since we are going to play with their color for the :hover and :focus states, we give them a smooth transition. Adding “pointer-events: none” will allow to actually click on the area of the icon and focus the input that lies beneath (we are actually clicking on the input).

    通过设置右边框和框阴影,我们在图标的右侧添加了一条细线。 由于我们将在:hover:focus状态下使用它们的颜色,因此我们为它们提供了平滑的过渡。 添加“指针事件:无”将允许实际单击图标区域并集中位于其下方的输入(实际上是单击输入)。

    Now we need to give some styles to the inputs:

    现在我们需要给输入一些样式:

    
    .form-1 input[type=text],
    .form-1 input[type=password] {
        font-family: 'Lato', Calibri, Arial, sans-serif;
        font-size: 13px;
        font-weight: 400;
        text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    
        /* Size and position */
        width: 100%;
        padding: 10px 18px 10px 45px;
    
        /* Styles */
        border: none; /* Remove the default border */
        box-shadow: 
            inset 0 0 5px rgba(0,0,0,0.1),
            inset 0 3px 2px rgba(0,0,0,0.1);
        border-radius: 3px;
        background: #f9f9f9;
        color: #777;
        transition: color 0.3s ease-out;
    }
    
    .form-1 input[type=text] {
        margin-bottom: 10px;
    }
    
    

    We make sure that neither the icon nor the input button overlap the text by giving the inputs a decent padding. And we set a bottom margin to the first input to prevent the second one to collapse.

    通过为输入提供适当的填充,我们确保图标和输入按钮都不会与文本重叠。 并且我们为第一个输入设置了下边距,以防止第二个输入崩溃。

    Before going any further, let’s not forget to set some styles for both, the hover and the focus state.

    在继续之前,请不要忘记为悬停和焦点状态设置一些样式。

    
    .form-1 input[type=text]:hover ~ i,
    .form-1 input[type=password]:hover ~ i {
        color: #52cfeb;
    }
    
    .form-1 input[type=text]:focus ~ i,
    .form-1 input[type=password]:focus ~ i {
        color: #42A2BC;
    }
    
    .form-1 input[type=text]:focus,
    .form-1 input[type=password]:focus,
    .form-1 button[type=submit]:focus {
        outline: none;
    }
    
    

    Two things here: we use the sibling selector (~) to change the color of the icons when interacting with the inputs: light blue for hover, darker blue for focus. And we remove the outline for Chrome.

    这里有两件事:当与输入交互时,我们使用同级选择器( ~ )来更改图标的颜色:浅蓝色表示悬停,深蓝色表示焦点。 并且我们删除了Chrome的轮廓。

    The last thing we have to style is the submit button. For some ugly overlapping reasons (what an awful property z-index is), I had to wrap it into a container to make things work. We could probably remove this container but it would require some annoying CSS trickery, and this is not the point.

    我们要做的最后一件事是提交按钮。 由于某些丑陋的重叠原因(可怕的z-index属性是什么),我不得不将其包装到一个容器中以使工作正常。 我们可能会删除此容器,但是这将需要一些烦人CSS技巧,而这并不是重点。

    
    .form-1 .submit {
        /* Size and position */
        width: 65px;
        height: 65px;
        position: absolute;
        top: 17px;
        right: -25px;
        padding: 10px;
        z-index: 2;
    
        /* Styles */
        background: #ffffff;
        border-radius: 50%;
        box-shadow: 
            0 0 2px rgba(0,0,0,0.1),
            0 3px 2px rgba(0,0,0,0.1),
            inset 0 -3px 2px rgba(0,0,0,0.2);
    }
    
    

    Things are fairly simple here: we create a circle element and put it on top of our form, slightly out of it on the right side. Box shadows accentuate this overlapping effect.

    事情在这里很简单:我们创建一个circle元素,并将其放在窗体的顶部,稍稍在右侧。 盒子阴影会加剧这种重叠效果。

    Problem: box shadows accentuate this overlapping effect, but they can also destroy it. Indeed, we can see the shadow on the frame of the form (the spacing between the fields and the right padding of the form).

    问题:盒子阴影会加重这种重叠效果,但它们也会破坏它。 确实,我们可以看到表单框架上的阴影(字段之间的间距和表单的右填充)。

    Basically, we can hide those shadows with some kind of masks with the same background color of the form. This is a job for a pseudo-element!

    基本上,我们可以使用与表单背景颜色相同的某种遮罩来隐藏这些阴影。 这是伪元素的工作!

    
    .form-1 .submit:after {
        /* Size and position */
        content: "";
        width: 10px;
        height: 10px;
        position: absolute;
        top: -2px;
        left: 30px;
    
        /* Styles */
        background: #ffffff;
        
        /* Other masks trick */
        box-shadow: 0 62px white, -32px 31px white;
    }
    
    

    There are three shadows to cover since our circular element is at the intersection of the spacing between the fields and the right padding of the form. We place the first one on the top of the circular element. And with the box-shadow property, we can fake the two other masks. I think, this is something pretty hard to explain, so I suggest you open your developer tool and disable the box-shadow line on .submit:after to see what’s going on. Last but not least, our actual submit button:

    由于我们的圆形元素位于字段与表单的右填充之间的交集处,因此要覆盖三个阴影。 我们将第一个放置在圆形元素的顶部。 使用box-shadow属性,我们可以伪造其他两个蒙版。 我认为,这很难解释,因此建议您打开开发人员工具,并禁用.submit:after上的阴影框.submit:after以查看发生了什么。 最后但并非最不重要的一点是,我们的实际提交按钮:

    
    .form-1 button {
        /* Size and position */
        width: 100%;
        height: 100%;
        margin-top: -1px;
    
        /* Icon styles */
        font-size: 1.4em;
        line-height: 1.75;
        color: white;
    
        /* Styles */
        border: none; /* Remove the default border */
        border-radius: inherit;
        background: linear-gradient(#52cfeb, #42A2BC);
        box-shadow: 
            inset 0 1px 0 rgba(255,255,255,0.3),
            0 1px 2px rgba(0,0,0,0.35),
            inset 0 3px 2px rgba(255,255,255,0.2),
            inset 0 -3px 2px rgba(0,0,0,0.1);
    
        cursor: pointer;
    }
    
    

    Finally, the style for the hover, focus (e.g. when tabbing through) and active (pressed) state of the button:

    最后,悬停的样式,按钮的焦点(例如,在跳格时)和活动(按下)状态:

    
    .form-1 button:hover,
    .form-1 button[type=submit]:focus {
        background: #52cfeb;
        transition: all 0.3s ease-out;
    }
    
    .form-1 button:active {
        background: #42A2BC;
        box-shadow: 
            inset 0 0 5px rgba(0,0,0,0.3),
            inset 0 3px 4px rgba(0,0,0,0.3);
    }
    
    

    Fairly simple: a plain color for hover and focus. But wait, there’s more! Since we use a gradient on the default state, and gradients can’t be transitioned to, the browser first disables the gradient then applies the background color. This particular behavior causes a white flash when you hover over or focus the button, which, in my opinion, is pretty cool. It looks like a brief light reflection!

    非常简单:一种用于悬停和聚焦的纯色。 但是,等等,还有更多! 由于我们在默认状态下使用渐变,并且渐变无法过渡到,因此浏览器首先禁用渐变,然后应用背景色。 当您将鼠标悬停或聚焦在按钮上时,这种特殊行为会引起白色闪烁,我认为这非常酷。 看起来像是短暂的光反射!

    例子2 (Example 2)

    CustomLoginForms_02

    This one is far less minimal and provides some new options: a “Sign in with Twitter” button and a “Show password” toggle. This will involve some JavaScript.

    这是最小的,它提供了一些新选项:“使用Twitter登录”按钮和“显示密码”切换。 这将涉及一些JavaScript。

    标记 (The Markup)

    
    <form class="form-2">
        <h1><span class="log-in">Log in</span> or <span class="sign-up">sign up</span></h1>
        <p class="float">
            <label for="login"><i class="icon-user"></i>Username</label>
            <input type="text" name="login" placeholder="Username or email">
        </p>
        <p class="float">
            <label for="password"><i class="icon-lock"></i>Password</label>
            <input type="password" name="password" placeholder="Password" class="showpassword"> 
        </p>
        <p class="clearfix"> 
            <a href="#" class="log-twitter">Log in with Twitter</a>    
            <input type="submit" name="submit" value="Log in">
        </p>       
    </form>??
    
    

    Here we will use a title. I went for a h1 but you could basically use whatever you want. We also use labels, connected to their inputs with a for attribute.

    在这里,我们将使用标题。 我去了h1但您基本上可以使用任何您想要的东西。 我们还使用带有for属性将标签连接到其输入的标签。

    CSS (The CSS)

    Let’s start by giving some general styles to the whole form:

    首先,为整个表单提供一些通用样式:

    
    .form-2 {
        /* Size and position */
        width: 340px;
        margin: 60px auto 30px;
        padding: 15px;
        position: relative;
    
        /* Styles */
        background: #fffaf6;
        border-radius: 4px;
        color: #7e7975;
        box-shadow:
            0 2px 2px rgba(0,0,0,0.2),        
            0 1px 5px rgba(0,0,0,0.2),        
            0 0 0 12px rgba(255,255,255,0.4); 
    }
    
    

    We will create a semi-transparent border by applying some box shadows.

    我们将通过应用一些框阴影来创建半透明的边框。

    Now that we gave some basic styles to our form, let’s deal with the title. There are 3 different font styles in the title: bold, caps and dark grey; bold, caps and orange; light, low and light grey. So basic styles + 2 spans:

    现在我们为表单提供了一些基本样式,让我们处理标题。 标题中有3种不同的字体样式:粗体,大写和深灰; 粗体,大写和橙色; 浅,低和浅灰色。 因此,基本样式+ 2个跨度:

    
    .form-2 h1 {
        font-size: 15px;
        font-weight: bold;
        color: #bdb5aa;
        padding-bottom: 8px;
        border-bottom: 1px solid #EBE6E2;
        text-shadow: 0 2px 0 rgba(255,255,255,0.8);
        box-shadow: 0 1px 0 rgba(255,255,255,0.8);
    }
    
    .form-2 h1 .log-in,
    .form-2 h1 .sign-up {
        display: inline-block;
        text-transform: uppercase;
    }
    
    .form-2 h1 .log-in {
        color: #6c6763;
        padding-right: 2px;
    }
    
    .form-2 h1 .sign-up {
        color: #ffb347;
        padding-left: 2px;
    }
    
    

    Next, we use two paragraphs that will be placed side by side. Each one takes 50% of the available space in the form element, and thanks to the “border-box” box-sizing, the padding is calculated inside those 50%. That’s why we can make spacing between those two.

    接下来,我们将使用两个段落并排放置。 每个人占据表单元素中50%的可用空间,并且由于“边框”框的大小,因此在这50%的内部计算了填充。 这就是为什么我们可以在两者之间留出间隔。

    
    .form-2 .float {
        width: 50%;
        float: left;
        padding-top: 15px;
        border-top: 1px solid rgba(255,255,255,1);
    }
    
    .form-2 .float:first-of-type {
        padding-right: 5px;
    }
    
    .form-2 .float:last-of-type {
        padding-left: 5px;
    }
    
    

    Our wrappers are set. Let’s style the elements inside them! So we have a label and an input. The icon is inside the label in this example:

    我们的包装纸已经准备好了。 让我们对其中的元素进行样式设置! 因此,我们有一个标签和一个输入。 在此示例中,图标位于标签内:

    
    .form-2 label {
        display: block;
        padding: 0 0 5px 2px;
        cursor: pointer;
        text-transform: uppercase;
        font-weight: 400;
        text-shadow: 0 1px 0 rgba(255,255,255,0.8);
        font-size: 11px;
    }
    
    .form-2 label i {
        margin-right: 5px; /* Gap between icon and text */
        display: inline-block;
        width: 10px;
    }
    
    

    Note: using cursor: pointer on labels helps users understand they can click on it to focus the according input. This is an important detail.

    注意:使用cursor: pointer标签上的cursor: pointer可帮助用户理解他们可以单击它来聚焦相应的输入。 这是一个重要的细节。

    
    .form-2 input[type=text],
    .form-2 input[type=password] {
        font-family: 'Lato', Calibri, Arial, sans-serif;
        font-size: 13px;
        font-weight: 400;
        display: block;
        width: 100%;
        padding: 5px;
        margin-bottom: 5px;
        border: 3px solid #ebe6e2;
        border-radius: 5px;
        transition: all 0.3s ease-out;
    }
    
    

    Don’t forget the hover and the focus states:

    不要忘记悬停和焦点状态:

    
    .form-2 input[type=text]:hover,
    .form-2 input[type=password]:hover {
        border-color: #CCC;
    }
    
    .form-2 label:hover ~ input {
        border-color: #CCC;
    }
    
    .form-2 input[type=text]:focus,
    .form-2 input[type=password]:focus {
        border-color: #BBB;
        outline: none; /* Remove Chrome's outline */
    }
    
    

    Check out how we use the sibling selector (~) to trigger the hover state on the inputs when we hover the labels. Isn’t that super cool?

    了解当我们悬停标签时如何使用同级选择器( ~ )触发输入的悬停状态。 那不是很酷吗?

    Now, the submit buttons. But wait, since they are both floated in their container, we have to apply a clearfix to it. Remember how we do it?

    现在,提交按钮。 但是,等等,由于它们都漂浮在容器中,因此我们必须对其应用clearfix。 还记得我们是怎么做的吗?

    
    .clearfix:after {
    	content: "";
    	display: table;
    	clear: both;
    }
    
    .form-2 input[type=submit],
    .form-2 .log-twitter {
        /* Size and position */
        width: 49%;
        height: 38px;
        float: left;
        position: relative;
    
        /* Styles */
        box-shadow: inset 0 1px rgba(255,255,255,0.3);
        border-radius: 3px;
        cursor: pointer;
    
        /* Font styles */
        font-family: 'Lato', Calibri, Arial, sans-serif;
        font-size: 14px;
        line-height: 38px; /* Same as height */
        text-align: center;
        font-weight: bold;
    }
    
    .form-2 input[type=submit] {
        margin-left: 1%;
        background: linear-gradient(#fbd568, #ffb347);
        border: 1px solid #f4ab4c;
        color: #996319;
        text-shadow: 0 1px rgba(255,255,255,0.3);
    }
    
    .form-2 .log-twitter {
        margin-right: 1%;
        background: linear-gradient(#34a5cf, #2a8ac4);
        border: 1px solid #2b8bc7;
        color: #ffffff;
        text-shadow: 0 -1px rgba(0,0,0,0.3);
        text-decoration: none;
    }
    	
    
    

    Both buttons are 49% wide, and they have a left/right margin to make a small gap between them. Now we give them a hover, and -it doesn’t harm just this once- an active state.

    两个按钮的宽度均为49%,左/右边缘的间距很小。 现在,我们给他们一个悬停,并且-不仅对这一次有害-处于活动状态。

    
    .form-2 input[type=submit]:hover,
    .form-2 .log-twitter:hover {
        box-shadow: 
            inset 0 1px rgba(255,255,255,0.3), 
            inset 0 20px 40px rgba(255,255,255,0.15);
    }
    
    .form-2 input[type=submit]:active,
    .form-2 .log-twitter:active{
        top: 1px;
    }
    
    

    Thanks to the position relative, we can apply top: 1px to the buttons on the active state to make them look like they are being pushed down.

    由于位置相对,我们可以将top: 1px应用于活动状态上的按钮,以使其看起来像被按下了。

    Important: for browsers that don’t support box-shadow (still exist, right?), we use a background-color change instead. The no-boxshadow class is applied to the HTML with Modernizr in case a browser does not support box shadows. This is a nice example of how you can create a simple “fallback” for older browsers:

    重要提示:对于不支持盒形阴影(仍然存在,对吗?)的浏览器,我们改用背景颜色更改。 如果浏览器不支持框阴影,则no-boxshadow类将应用于ModernizrHTML。 这是一个很好的示例,说明如何为较旧的浏览器创建简单的“后备”:

    
    .no-boxshadow .form-2 input[type=submit]:hover {
        background: #ffb347;
    }
    
    .no-boxshadow .form-2 .log-twitter:hover {
        background: #2a8ac4;
    }
    
    

    JavaScript(The JavaScript)

    Hey, didn’t we forgot our little “show password” thing? We’re getting into it! First, did you know we can’t change the type attribute on an input? IMPOSSIBRU! To make a “show password” toggle, we have to delete the actual password input and create a text input instead. I’m not very good at jQuery, so I found a little snippet by Aaron Saray to manage it. Let’s have a look:

    嘿,我们不是忘记了“显示密码”这个小东西吗? 我们正在进入它! 首先,您知道我们无法更改输入的type属性吗? IMPOSSIBRU! 要进行“显示密码”切换,我们必须删除实际的密码输入,而是创建文本输入。 我不太擅长jQuery,所以我找到Aaron Saray的一些代码片段来管理它。 我们来看一下:

    
    $(function(){
    	$(".showpassword").each(function(index,input) {
    		var $input = $(input);
    		$("<p class='opt'/>").append(
    			$("<input type='checkbox' class='showpasswordcheckbox' id='showPassword' />").click(function() {
    				var change = $(this).is(":checked") ? "text" : "password";
    				var rep = $("<input placeholder='Password' type='" + change + "' />")
    					.attr("id", $input.attr("id"))
    					.attr("name", $input.attr("name"))
    					.attr('class', $input.attr('class'))
    					.val($input.val())
    					.insertBefore($input);
    				$input.remove();
    				$input = rep;
    			 })
    		).append($("<label for='showPassword'/>").text("Show password")).insertAfter($input.parent());
    	});
    });
    ?
    

    So what does this script do exactly? A few things:

    那么,该脚本到底能做什么? 一些东西:

    1. It spots every input with the .showpassword class.

      它使用.showpassword.showpassword每个输入。

    2. It creates a new container (.opt).

      它创建一个新的容器( .opt )。

    3. Inside this container, it creates a checkbox with a label linked to it.

      在此容器内,它会创建一个带有链接标签的复选框。
    4. It inserts this container after the .showpassword input’s parent.

      它将在.showpassword输入的父项之后插入此容器。

    5. When the checkbox in clicked, it removes the .showpassword input and creates another one instead with the according type attribute.

      单击该复选框后,它将删除.showpassword输入,并创建另一个具有.showpassword type属性的输入。

    Let’s not forget to give some styles to our checkbox and new label.

    我们不要忘记为复选框和新标签添加一些样式。

    
    .form-2 p:last-of-type {
        clear: both;    
    }
    
    .form-2 .opt {
        text-align: right;
        margin-right: 3px;
    }
    
    .form-2 label[for=showPassword] {
        display: inline-block;
        margin-bottom: 10px;
        font-size: 11px;
        font-weight: 400;
        text-transform: capitalize;
    }
    
    .form-2 input[type=checkbox] {
        vertical-align: middle;
        margin: -1px 5px 0 1px;
    }
    
    

    Last but not least, we add a few lines of jQuery to change the icon when the checkbox is checked! Fairly simple but quite effective!

    最后但并非最不重要的一点是,当选中复选框时,我们添加了几行jQuery来更改图标! 相当简单但是很有效!

    
    $('#showPassword').click(function(){
    	if($("#showPassword").is(":checked")) {
    		$('.icon-lock').addClass('icon-unlock');
    		$('.icon-unlock').removeClass('icon-lock');    
    	} else {
    		$('.icon-unlock').addClass('icon-lock');
    		$('.icon-lock').removeClass('icon-unlock');
    	}
    });
    
    

    例子3(Example 3)

    CustomLoginForms_03

    This one is inspired by an old work from Virgil Pana on Dribbble. Sadly, it looks like he removed it from Dribbble so I can’t show you the original concept. Anyway, you’ve probably understood the point that it’s for showing you how to create this awesome light effect with pure CSS!

    此作品的灵感来自维吉尔·帕纳(Virgil Pana)在Dribbble上的一件古老作品。 可悲的是,看起来他将其从Dribbble中删除了,所以我无法向您展示原始概念。 无论如何,您可能已经了解了它的关键,它向您展示了如何使用纯CSS创建这种超酷的灯光效果!

    标记 (The Markup)

    
    <form class="form-3">
        <p class="clearfix">
            <label for="login">Username</label>
            <input type="text" name="login" id="login" placeholder="Username">
        </p>
        <p class="clearfix">
            <label for="password">Password</label>
            <input type="password" name="password" id="password" placeholder="Password"> 
        </p>
        <p class="clearfix">
            <input type="checkbox" name="remember" id="remember">
            <label for="remember">Remember me</label>
        </p>
        <p class="clearfix">
            <input type="submit" name="submit" value="Sign in">
        </p>       
    </form>?
    
    

    Look how we introduce a new feature in this form: the “Remember me” option. This is something very specific to login forms since it allows the application to remember that you’re authenticated.

    看看我们如何以这种形式引入新功能:“记住我”选项。 这是登录表单所特有的,因为它允许应用程序记住您已通过身份验证。

    CSS (The CSS)

    
    .form-3 {
        font-family: 'Ubuntu', 'Lato', sans-serif;
        font-weight: 400;
        /* Size and position */
        width: 300px;
        position: relative;
        margin: 60px auto 30px;
        padding: 10px;
        overflow: hidden;
    
        /* Styles */
        background: #111; 
        border-radius: 0.4em;
        border: 1px solid #191919;
        box-shadow: 
            inset 0 0 2px 1px rgba(255,255,255,0.08), 
            0 16px 10px -8px rgba(0, 0, 0, 0.6);
    }
    
    

    The shadow under the login form will look special because of the negative spread radius. We can actually compress the shadow like that. Let’s dig a little bit into the structure of our form, shall we? For the fields, we use two p tags wrapping a label and an input, both floated. This means we have to clearfix our containers (see previous examples).

    由于展开半径为负,因此登录表单下的阴影看起来会很特殊。 实际上,我们可以像这样压缩阴影。 让我们深入研究一下表单的结构,对吧? 对于字段,我们使用包裹标签和输入的两个p标签,它们都浮动。 这意味着我们必须清除容器(请参见前面的示例)。

    Let’s add some style to the labels and text/password inputs plus their hovered and focused states, of course:

    当然,让我们为标签和文本/密码输入以及它们的悬浮和集中状态添加一些样式:

    
    .form-3 label {
        /* Size and position */
        width: 50%;
        float: left;
        padding-top: 9px;
    
        /* Styles */
        color: #ddd;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-shadow: 0 1px 0 #000;
        text-indent: 10px;
        font-weight: 700;
        cursor: pointer;
    }
    
    .form-3 input[type=text],
    .form-3 input[type=password] {
        /* Size and position */
        width: 50%;
        float: left;
        padding: 8px 5px;
        margin-bottom: 10px;
        font-size: 12px;
    
        /* Styles */
        background: linear-gradient(#1f2124, #27292c);    
        border: 1px solid #000;
        box-shadow:
            0 1px 0 rgba(255,255,255,0.1);
        border-radius: 3px;
    
        /* Font styles */
        font-family: 'Ubuntu', 'Lato', sans-serif;
        color: #fff;
    
    }
    
    .form-3 input[type=text]:hover,
    .form-3 input[type=password]:hover,
    .form-3 label:hover ~ input[type=text],
    .form-3 label:hover ~ input[type=password] {
        background: #27292c;
    }
    
    .form-3 input[type=text]:focus, 
    .form-3 input[type=password]:focus {
        box-shadow: inset 0 0 2px #000;
        background: #494d54;
        border-color: #51cbee;
        outline: none; /* Remove Chrome outline */
    }
    
    

    Now that we have some beautiful inputs, we have to create our little checkbox for the “Remember me” feature, and the submit button. Those two things are floated side by side:

    现在我们有了一些漂亮的输入,我们必须为“记住我”功能和提交按钮创建一个小复选框。 这两件事并排浮动:

    
    .form-3 p:nth-child(3),
    .form-3 p:nth-child(4) {
        float: left;
        width: 50%;
    }
    
    

    We use advanced CSS selectors to target them, but you could use a class if you want (or if you have to, for legacy browser coverage). Anyway, let’s start with the checkbox and its label:

    我们使用高级CSS选择器来定位它们,但是您可以根据需要使用一个类(或者,如果有必要,则可以使用旧版浏览器)。 无论如何,让我们从复选框及其标签开始:

    
    .form-3 label[for=remember] {
        width: auto;
        float: none;
        display: inline-block;
        text-transform: capitalize;
        font-size: 11px;
        font-weight: 400;
        letter-spacing: 0px;
        text-indent: 2px;
    }
    
    .form-3 input[type=checkbox] {
        margin-left: 10px;
        vertical-align: middle;
    }
    
    

    Since this label is quite different from the others, we have to tweak a few things to make it right: so it’s pretty much removing previously set styles. As for the checkbox, we add a little margin to its right to prevent the label to stick to it, and the vertical align fix some weird, well, vertical align (!).

    由于此标签与其他标签完全不同,因此我们必须进行一些调整以使其正确:因此,它几乎删除了先前设置的样式。 至于复选框,我们在其右边添加了一点空白,以防止标签粘附到其上,并且垂直对齐可修复一些奇怪的垂直对齐(!)。

    Last, our submit button with its hovered state:

    最后,我们的提交按钮处于悬停状态:

    
    .form-3 input[type=submit] {
        /* Width and position */
        width: 100%;
        padding: 8px 5px;
      
        /* Styles */
        border: 1px solid #0273dd; /* Fallback */
        border: 1px solid rgba(0,0,0,0.4);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.3),
            inset 0 10px 10px rgba(255,255,255,0.1);
        border-radius: 3px;
        background: #38a6f0;
        cursor:pointer;
      
        /* Font styles */
        font-family: 'Ubuntu', 'Lato', sans-serif;
        color: white;
        font-weight: 700;
        font-size: 15px;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
    }
    
    .form-3 input[type=submit]:hover { 
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    }
    
    .form-3 input[type=submit]:active { 
        background: #287db5;
        box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
        border-color: #000; /* Fallback */
        border-color: rgba(0,0,0,0.9);
    }
    
    .no-boxshadow .form-3 input[type=submit]:hover {
        background: #2a92d8;
    }
    
    

    But where the hell is our promised light effect? Okay guys, let’s go for it. To achieve this, we need three elements:

    但是我们承诺的灯光效果到底在哪里呢? 好的,让我们开始吧。 为此,我们需要三个要素:

    • One for the gradient line from the top of the form

      一个从表单顶部开始的渐变线
    • One for the small flash on the previous line

      一个用于上一行的小闪光灯
    • One for the large reflection on the right part the form

      一种用于右侧部分的大反射

    We will start with the first two elements with pseudo-elements on the form tag.

    我们将从form标签上带有伪元素的前两个元素开始。

    
    /* Gradient line */
    .form-3:after {
        /* Size and position */
        content: "";
        height: 1px;
        width: 33%;
        position: absolute;
        left: 20%;
        top: 0;
    
        /* Styles */
        background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
    }
    
    /* Small flash */
    .form-3:before {
        /* Size and position */
        content: "";
        width: 8px;
        height: 5px;
        position: absolute;
        left: 34%;
        top: -7px;
        
        /* Styles */
        border-radius: 50%;
        box-shadow: 0 0 6px 4px #fff;
    }
    
    

    Finally, our light reflection. But wait, we don’t have enough pseudo-elements! Don’t worry, we will use our first paragraph for it.

    最后,我们的光反射。 但是,等等,我们没有足够的伪元素! 不用担心,我们将使用我们的第一段。

    
    .form-3 p:nth-child(1):before{
        /* Size and position */
        content: "";
        width: 250px;
        height: 100px;
        position: absolute;
        top: 0;
        left: 45px;
    
        /* Styles */
        transform: rotate(75deg);
        background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
        pointer-events: none;
    }
    
    

    Important: you have to disable click events on it with the pointer-events property. If you don’t, you won’t be able to click on inputs anymore since there will be a layer on top of them. We will have to remove the reflection for browsers that don’t support the pointer-events (we’ve added this none-core detect to our Modernizr build):

    重要提示:您必须使用pointer-events property禁用其点击事件。 如果您不这样做,您将无法再单击输入,因为在它们上面会有一层。 对于不支持指针事件的浏览器,我们将必须删除反射(我们在Modernizr构建中添加了此无核检测):

    
    .no-pointerevents .form-3 p:nth-child(1):before {
        display: none;
    }
    
    

    例子4(Example 4)

    CustomLoginForms_04

    This one’s particularity is the absence of labels. Or icons. Yes, I know, I said earlier we absolutely need to have something to tell users what to do. And we have! We have placeholders. And for browsers that don’t support them, we will make labels visible!

    这个人的特殊性是没有标签。 或图标。 是的,我知道,我之前说过,我们绝对需要告诉用户该怎么做。 我们有! 我们有占位符。 对于不支持它们的浏览器,我们将使标签可见!

    标记 (The Markup)

    
    <form class="form-4">
        <h1>Login or Register</h1>
        <p>
            <label for="login">Username or email</label>
            <input type="text" name="login" placeholder="Username or email" required>
        </p>
        <p>
            <label for="password">Password</label>
            <input type="password" name='password' placeholder="Password" required> 
        </p>
    
        <p>
            <input type="submit" name="submit" value="Continue">
        </p>       
    </form>?
    
    

    Let me introduce the required attribute to you. When supported, it allows the browser to check if the field is empty or not, and submit the form accordingly.

    让我向您介绍required属性。 受支持时,它允许浏览器检查该字段是否为空,并相应地提交表单。

    Important: you should always build a server-side verification for submitting your forms. With a web inspector, it is very easy to remove an attribute, and JavaScript can be disabled as well, so don’t rely on client-side verification only.

    重要提示:您应始终构建服务器端验证以提交表单。 使用Web检查器,删除属性非常容易,并且也可以禁用JavaScript,因此不要仅依赖于客户端验证。

    CSS (The CSS)

    As always, we start with the form and the title since it’s fairly simple.

    与往常一样,我们从表单和标题开始,因为它非常简单。

    
    .form-4 {
        /* Size and position */
        width: 300px;
        margin: 60px auto 30px;
        padding: 10px;
        position: relative;
    
        /* Font styles */
        font-family: 'Raleway', 'Lato', Arial, sans-serif;
        color: white;
        text-shadow: 0 2px 1px rgba(0,0,0,0.3);
    }
    
    .form-4 h1 {
        font-size: 22px;
        padding-bottom: 20px;
    }
    
    

    Let’s move on to the inputs:

    让我们继续输入:

    
    .form-4 input[type=text],
    .form-4 input[type=password] {
        /* Size and position */
        width: 100%;
        padding: 8px 4px 8px 10px;
        margin-bottom: 15px;
    
        /* Styles */
        border: 1px solid #4e3043; /* Fallback */
        border: 1px solid rgba(78,48,67, 0.8);
        background: rgba(0,0,0,0.15);
        border-radius: 2px;
        box-shadow: 
            0 1px 0 rgba(255,255,255,0.2), 
            inset 0 1px 1px rgba(0,0,0,0.1);
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    
        /* Font styles */
        font-family: 'Raleway', 'Lato', Arial, sans-serif;
        color: #fff;
        font-size: 13px;
    }
    
    

    Let’s change the style for the placeholders (where it’s possible):

    让我们更改占位符的样式(如果可能):

    
    .form-4 input::-webkit-input-placeholder {
        color: rgba(37,21,26,0.5);
        text-shadow: 0 1px 0 rgba(255,255,255,0.15);
    }
    
    .form-4 input:-moz-placeholder {
        color: rgba(37,21,26,0.5);
        text-shadow: 0 1px 0 rgba(255,255,255,0.15);
    }
    
    .form-4 input:-ms-input-placeholder {
        color: rgba(37,21,26,0.5);
        text-shadow: 0 1px 0 rgba(255,255,255,0.15);
    }
    
    

    Next, let’s add the hover and focus styles:

    接下来,让我们添加悬停和焦点样式:

    
    .form-4 input[type=text]:hover,
    .form-4 input[type=password]:hover {
        border-color: #333;
    }
    
    .form-4 input[type=text]:focus,
    .form-4 input[type=password]:focus,
    .form-4 input[type=submit]:focus {
        box-shadow: 
            0 1px 0 rgba(255,255,255,0.2), 
            inset 0 1px 1px rgba(0,0,0,0.1),
            0 0 0 3px rgba(255,255,255,0.15);
        outline: none;
    }
    
    /* Fallback */
    .no-boxshadow .form-4 input[type=text]:focus,
    .no-boxshadow .form-4 input[type=password]:focus {
        outline: 1px solid white;
    }
    
    

    And the submit button:

    和提交按钮:

    
    .form-4 input[type=submit] {
        /* Size and position */
        width: 100%;
        padding: 8px 5px;
        
        /* Styles */
        background: linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));    
        border-radius: 5px;
        border: 1px solid #4e3043;
        box-shadow: 
        	inset 0 1px rgba(255,255,255,0.4), 
        	0 2px 1px rgba(0,0,0,0.1);
        cursor: pointer;
        transition: all 0.3s ease-out;
    
        /* Font styles */
        color: white;
        text-shadow: 0 1px 0 rgba(0,0,0,0.3);
        font-size: 16px;
        font-weight: bold;
        font-family: 'Raleway', 'Lato', Arial, sans-serif;
    }
    
    .form-4 input[type=submit]:hover {
        box-shadow: 
            inset 0 1px rgba(255,255,255,0.2), 
            inset 0 20px 30px rgba(99,64,86,0.5);
    }
    
    /* Fallback */
    .no-boxshadow .form-4 input[type=submit]:hover {
        background: #594642;
    }
    
    

    And now, let’s deal with our no-placeholder fallback. Placeholder is not a vital feature I know, unless you exclusively rely on it to tell user what are the inputs for. In this case, you have to provide a fallback.

    现在,让我们来解决无占位符回退的问题。 除非您完全依靠占位符来告诉用户输入的内容,否则占位符并不是我所知道的重要功能。 在这种情况下,您必须提供一个备用。

    
    .form-4 label {
        display: none;
        padding: 0 0 5px 2px;
        cursor: pointer;
    }
    
    .form-4 label:hover ~ input {
        border-color: #333;
    }
    
    .no-placeholder .form-4 label {
        display: block;
    }
    
    

    This is very simple: if placeholders are not supported, labels turn visible. End of story.

    这非常简单:如果不支持占位符,则标签变为可见。 故事结局。

    例子5 (Example 5)

    CustomLoginForms_05

    This last example is a glass-like, minimal form with a subtle twist. We won’t use labels, and everything looks very compact. We’ll rotate the text of the submit button and make an arrow appear on hover.

    最后一个示例是类似玻璃的最小形式,带有细微的扭曲。 我们不会使用标签,并且所有内容看起来都很紧凑。 我们将旋转“提交”按钮的文本,并在悬停时显示一个箭头。

    标记 (The Markup)

    
    <form class="form-5 clearfix">
        <p>
            <input type="text" id="login" name="login" placeholder="Username">
            <input type="password" name="password" id="password" placeholder="Password"> 
        </p>
        <button type="submit" name="submit">
        	<i class="icon-arrow-right"></i>
        	<span>Sign in</span>
        </button>     
    </form>????
    
    

    A minimalistic markup for a minimalistic form. 😉

    简约形式的简约标记。 😉

    CSS (The CSS)

    
    .form-5 {
        /* Size and position */
        width: 300px;
        margin: 60px auto 30px;
        position: relative;
    
        /* Styles */
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0,0,0,0.1), 0 3px 2px rgba(0,0,0,0.1);
    }
    
    

    Let’s style the paragraphs and the inputs:

    让我们设置段落和输入的样式:

    
    .form-5 p {
        width: 70%;
        float: left;
        border-radius: 5px 0 0 5px;
        border: 1px solid #fff;
        border-right: none;
    }
    
    .form-5 input[type=text],
    .form-5 input[type=password] {
        /* Size and position */
        width: 100%;
        height: 50px;
        padding: 0 10px;
    
        /* Styles */
        border: none; /* Remove the default border */
        background: white; /* Fallback */
        background: rgba(255,255,255,0.2);
        box-shadow: 
            inset 0 0 10px rgba(255,255,255,0.5);
    
        /* Font styles */
        font-family: 'Montserrat', sans-serif;
        text-indent: 10px;
        color: #ee4c8d;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        font-size: 20px;       
    }
    
    .form-5 input[type=text] {
        border-bottom: 1px solid #fff; /* Fallback */
        border-bottom: 1px solid rgba(255,255,255,0.7);
        border-radius: 5px 0 0 0;
    }
    
    .form-5 input[type=password] {
        border-top: 1px solid #CCC; /* Fallback */
        border-top: 1px solid rgba(0,0,0,0.1);
        border-radius: 0 0 0 5px;
    }
    
    

    Let’s apply some hover styles and style the placeholders:

    让我们应用一些悬停样式并设置占位符的样式:

    
    .form-5 input[type=text]:hover,
    .form-5 input[type=password]:hover,
    .form-5 input[type=text]:focus,
    .form-5 input[type=password]:focus {
        background: #f7def7; /* Fallback */
        background: rgba(255,255,255,0.4);
        outline: none;
    }
    
    .form-5 input::-webkit-input-placeholder {
        color: #fff;
        text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
        font-family: 'Handlee', cursive;
    }
    
    .form-5 input:-moz-placeholder {
        color: #fff;
        text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
        font-family: 'Handlee', cursive;
    }
    
    .form-5 input:-ms-input-placeholder {
        color: #fff;
        text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
        font-family: 'Handlee', cursive;
    }
    
    

    And now, the submit button. The little i will contain an arrow icon but we will not make it visible for now, just on hover. Note that we use a span inside the button to turn the text without turning the button.

    现在,提交按钮。 小小的我将包含一个箭头图标,但我们暂时不会将其显示,只是悬停时。 请注意,我们在按钮内部使用了一个跨度来旋转文本而不旋转按钮。

    
    .form-5 button {
        /* Size and position */
        width: 30%;
        height: 102px;
        float: left;
        position: relative;
        overflow: hidden;
    
        /* Styles */
        background: 
        	url(../images/noise.png), 
        	radial-gradient(ellipse at center, #ee4c8d 0%,#b53467 100%);
        border-radius: 0 5px 5px 0;
        box-shadow:
            inset 0 0 4px rgba(255, 255, 255, 0.7), 
            inset 0 0 0 1px rgba(0, 0, 0, 0.2);
        border: none;
        border-left: 1px solid silver;
        cursor: pointer;  
        line-height: 102px; /* Same as height */
    }
    
    .form-5 button i {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: -20px;
        font-size: 64px;
        line-height: 109px;
        color: #8d1645;
        opacity: 0;
        text-shadow: 0 1px 0 rgba(255,255,255,0.4);
        transition: all 0.2s ease-out;
    }
    
    .form-5 button span {
        display: block;
    
        /* Font styles */ 
        color: #8d1645;
        font-family: 'Montserrat', Arial, sans-serif; 
        font-size: 20px;
        text-shadow: 0 1px 0 rgba(255,255,255,0.4);
        transform: rotate(-90deg);
        transition: all 0.2s linear;
    }
    
    

    In case the browser doesn’t support the transform property, the text is simply not rotated. No big deal. We’ve added a subtle texture to the button by applying two backgrounds: the texture and the radial gradient that lies beneath.

    如果浏览器不支持transform属性,则不会旋转文本。 没什么大不了的。 我们通过应用两个背景为按钮添加了微妙的纹理:纹理和下方的径向渐变。

    Now, let’s add the hover, focus and active state styles. On hover, we will make the span move to the left and fade out and the arrow will appear:

    现在,让我们添加悬停,焦点和活动状态样式。 悬停时,我们将使跨度向左移动并淡出,并出现箭头:

    
    
    .form-5 button:focus {
        outline: none;
    }
    
    .form-5 button:hover span,
    .form-5 button:focus span {
        opacity: 0;
        transform: rotate(-90deg) translateY(-20px);
    }
    
    .form-5 button:hover i,
    .form-5 button:focus i {
        opacity: 0.5;
        left: 0;
        transition-delay: 0.2s;
    }
    
    /* Click on button */
    
    .form-5 button:active span,
    .form-5 button:active i {
        transition: none; 
    }
    
    .form-5 button:active span {
        opacity: 0;
    }
    
    .form-5 button:active i {
        opacity: 0.5;
        left: 0;
        color: #fff;
    }	
    
    

    When we click on the button, we don’t want any transitions so that it doesn’t look to messy.

    当我们单击按钮时,我们不希望有任何过渡,因此看起来不会很杂乱。

    JavaScript (The JavaScript)

    Let’s use a little bit of JavaScript here for adding HTML5 placeholder behavior to the browsers that don’t support it. We are going to use a jQuery plugin by Mathias Bynens. Check out the GitHub repo for details.

    让我们在这里使用一些JavaScript,将HTML5占位符行为添加到不支持HTML5的浏览器中。 我们将使用Mathias Bynens的jQuery插件。 查看GitHub存储库以获取详细信息。

    After including jQuery and the script, we simply call it like this:

    包含jQuery和脚本之后,我们简单地这样称呼它:

    
    $(function(){
    	$('input, textarea').placeholder();
    });
    
    

    And this will add placeholder behavior to older browsers.

    这会将占位符行为添加到较旧的浏览器中。

    最后的话 (Final words)

    Now that you have read this, the only thing you have to do is to create your own forms. This is something which can be very creative, so please let yourself go and show us what you can do! Dribbble is a wonderful source of inspiration for such things, so I’d suggest you have a little ride over there to see what’s going on. You may find beautiful forms like these:

    既然您已经阅读了此书,那么您唯一要做的就是创建自己的表单。 这可能很有创意,所以请放手告诉我们您可以做什么! Dribbble是此类事情的绝佳灵感来源,因此,我建议您在那儿走一小段路,看看发生了什么。 您可能会发现类似以下的漂亮形式:

    As further readings, I recommend:

    作为进一步阅读,我建议:

    Thanks a lot for reading this tutorial, and as always if you have any question, just ask, or if you have related work to show, just do!

    非常感谢您阅读本教程,并且一如既往地有任何疑问,只问一下,或者如果您有相关的工作要展示,就去做吧!

    翻译自: https://tympanus.net/codrops/2012/10/16/custom-login-form-styling/

    展开全文
  • 普通layer弹框样式

    2019-05-08 15:12:28
    记录一下自己平时经常用到的弹出层表单,方便以后复制使用。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...

    记录一下自己平时经常用到的弹出层表单,方便以后复制使用。

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.0/css/bootstrap.css" rel="stylesheet">
        <style>
            #commitFormLayerWin div.layer-wrap {
                background: #fff;
                font-size: 16px;
            }
    
            #commitFormLayerWin div.form-content {
                padding: 20px 20px 0 20px;
                margin-bottom: 16px;
            }
    
            #commitFormLayerWin div.form-info-item-item {
                display: flex;
                margin-bottom: 14px;
            }
    
            #commitFormLayerWin .form-title {
                min-width: 52px;
                line-height: 32px;
                font-weight: 600;
            }
    
            #commitFormLayerWin .form-info-item {
                flex: 1;
            }
    
            #commitFormLayerWin div.commit-form-wrap {
                border-top: 1px solid #e7e7e7;
                text-align: center;
                padding: 8px 0;
            }     
    
            #commitFormLayerWin div.commit-form-wrap span {
                display: inline-block;
                width: 50%;
                line-height: 38px;
                cursor: pointer;
                color:#999;
            }
    		#commitFormLayerWin div.commit-form-wrap span.commit-form-btn {
                color: #0076FB;
                border-right: 1px solid #e7e7e7;
            }
            #commitFormLayerWin .form-control {
                font-size: 16px;
                padding:6px 8px;
            }
    
            #commitFormLayerWin textarea {
                min-height: 80px;
                resize: none;
            }
        </style>
        <title>测试..</title>
    </head>
    
    <body>
        <div class="layer-wrap">
            <div class="form-content">
                <div class="form-info-item-item">
                    <span class="form-title">姓名:</span>
                    <span class="form-info-item"><input type="text" name="" class="form-control"></span>
                </div>
                <div class="form-info-item-item">
                    <span class="form-title">电话:</span>
                    <span class="form-info-item"><input type="text" name="" class="form-control"></span>
                </div>
                <div class="form-info-item-item">
                    <span class="form-title">备注:</span>
                    <span class="form-info-item"><textarea name="" class="form-control"
                            placeholder="内容请不要超过30个字"></textarea></span>
                </div>
            </div>
            <div class="commit-form-wrap">
                <span class="commit-form-btn">确定</span>
                <span class="cancel-form-btn">取消</span>
            </div>
        </div>
        <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.0/js/bootstrap.js"></script>
        <script>
            function openContact(){
    			var layerIndex = layer.open({
    				title:['表头', 'font-size:18px;text-align:center;background:#5FAEF0;color:#fff;padding:0 10px;'],
    				type:1,
    				area: ['82%', 'auto'],
    				closeBtn: 0,
    				id:"commitFormLayerWin",
    				scrollbar: false,
    				content: '<div class="layer-wrap"><div class="form-content"><div class="lxfzr-form-item"><span class="lxfzr-title">姓名:</span><span class="lxfzr-form"><input type="text"name=""class="form-control"></span></div><div class="lxfzr-form-item"><span class="lxfzr-title">电话:</span><span class="lxfzr-form"><input type="text"name=""class="form-control"></span></div><div class="lxfzr-form-item"><span class="lxfzr-title">备注:</span><span class="lxfzr-form"><textarea name=""class="form-control"placeholder="内容请不要超过30个字"></textarea></span></div></div><div class="commit-form-wrap"><span class="commit-form-btn">确定</span><span class="cancel-form-btn">取消</span></div></div>',
    				success: function(layero, index){
    				    console.log('open win');
    				},
    				end: function(layero, index){
    				    console.log('关闭了');
    				}, 
    			});
                var $form = $("#commitFormLayerWin");
                $form.find(".commit-form-btn").on("click",function(){
                    
                    layer.close(layerIndex)
                })
                $form.find(".cancel-form-btn").on("click",function(){
                    layer.close(layerIndex)
                })
    
    		}
        </script>
    </body>
    
    </html>
    
    展开全文
  • layer弹出层 样式问题

    2017-04-24 07:50:07
    自己写的弹出层 和 网上的,这样的样式 是直接写的吗?就 单纯的吧内容调整移动到弹出层中间? 还是有别的什么方法?求大神指教!新手 ![图片说明]...
  • HTML 表单元素的基本样式

    千次阅读 2018-02-22 17:48:53
    表单元素的样式CSS 表单元素主要包括 label、input、textarea、select、datalist、keygen、progress、meter、output等,以及对表单元素进行分组的 fieldset 和 legend 元素。根据功能的不同,input 元素又包括 text...

    表单元素主要包括 label、input、textarea、select、datalist、keygen、progress、meter、output等,以及对表单元素进行分组的 fieldset 和 legend 元素。

    根据功能的不同,input 元素又包括 text、password、radio、checkbod、file、submit、reset、search、tel、url、email、number、range、color、Date Pickers等类型。

    由于规范只规定了表单元素的功能,并未规定它们的外观。因此,在不同浏览器下,表单元素的外观各不相同。

    为了获得更好的用户体验,在所有浏览器下保持统一的风格,通常需要重新定义表单元素的外观,来覆盖浏览器的默认外观。

    自定义外观时,元素类型不同,需要重新定义的内容也不尽相同。接下来,针对不同的表单元素,进行分别介绍。

    input元素

    在input 元素中,单行文本输入框、文件选择框、单选框和复选框、表单按钮在各浏览器下的外观差别较大,需要专门定义外观,来统一风格。

    1)单行文本输入框

    单行文本输入框,包括text、password、search、tel、url、email、number、Date Pickers,它们的作用是纯粹接受文本,这些文本信息或者由用户手工输入,或者在浏览器的弹出框中选择输入。

    假设在一个用户登录界面上,包含一个 type="text" 和一个 type="password" 的文本输入框,分别用来输入用户名的密码:

    
    
    1. <form id="layer" action="" method="post">
    2. <p><label>用户名: </label><input type="text" name="username" /></p>
    3. <p><label>密&nbsp;&nbsp;码: </label><input type="password" name="password" />
    4. </form>

    在外观上,单行文本输入框就是一个添加了边框的矩形区域,而不同浏览器下的默认尺寸、边框、背景等都不尽相同。如,在Google Chrome下的外观如图 7‑4 所示:

    在chrome下的默认外观图7-4 在chrome下的默认外观

    在IE8下的外观如图 7‑5 所示:

    在IE 8下的默认外观图7-5 在IE 8下的默认外观

    可以看出,不同浏览器下的差别很大,即便是相同浏览器的不同版本(如IE6、IE8),也可能有很大差别。因此,为了能够在所有浏览器下表现相同,需要重新定义框的宽度、高度、字体、文本、边框、背景等,来覆盖浏览器的默认外观。如:

    
    
    1. input[type="text"] ,
    2. input[type="password"]  {
    3.     width: 240px;
    4.     height: 28px;
    5.     color: #333;
    6.     font-size: 14px;
    7.     background: #fff;
    8.     border: 1px solid #cbcbcb;
    9. }

    有时候,为了突显该文本输入框的作用,比如用户登录表单中,在用户名和密码的输入框中,通过背景图像来添加一个小图标,显得更人性化。设置背景图像后,需要为文本框设置相应的左内边距,来为图像腾出空间。

    
    
    1. input[type="text"],
    2. input[type="password"] {
    3.     padding-left: 34px;
    4. }
    5. input[type="text"] {
    6.     background: #fff url(user.gif) 10px center no-repeat;
    7. }
    8. input[type="password"] {
    9.     background: #fff url(pass.gif) 10px center no-repeat;
    10. }

    运行结果如图 7‑6 所示:

    添加图标图7-6 添加图标

    在现代浏览器中,可以通过圆角和内部盒阴影,对文本输入框进行渐进式增强,使它看上去更美观,还能增加一点不错的立体效果。

    
    
    1. input[type="text"],
    2. input[type="password"] {
    3.     border-radius: 4px;
    4.     box-shadow: inset 2px 2px 4px #d9d9d9;
    5. }

    运行结果如图 7‑7 所示:

    添加圆角和内部盒阴影图7-7 添加圆角和内部盒阴影

    如果在文本输入框获得焦点时,通过改变边框颜色,并在文本框的外面,添加一个淡淡的盒阴影,这样既能向用户作出反馈,又能增强用户体验。

    由于大多数现代浏览器中,在文本输入框获得焦点时,都是通过改变文本框的轮廓颜色,来向用户作出反馈。如果不希望如此,可以把 outline 属性设置为 none,关闭此功能。

    
    
    1. input[type="text"]:focus,
    2. input[type="password"]:focus {
    3.     outline: none;
    4.     border: 1px solid #bbb;
    5.     box-shadow: 2px 2px 8px #b8b7b7;
    6. }

    运行结果如图 7‑8 所示:

    添加外部盒阴影图7-8 添加外部盒阴影

    2)文件选择框

    文件选择框与单行文本输入框不同,它有一个按钮,供用户选择文件。在不同的浏览器下,文件选择框的外观差别很大,情况稍微有点复杂。

    在IE下,文件选择框表现为一个文本输入框和一个“浏览…”按钮。在用户未选择文件时,文本输入框的内容为空,用户选择文件后,文本输入框的内容为文件的绝对路径。如,在IE8下的默认外观如图 7‑9 所示:

    文件选择框在IE下效果图7-9 文件选择框在IE下效果

    并且,在IE的不同版本下,文件选择框的外观还稍有差别,IE6和IE7下,文本输入框是灰色背景,而IE8下是白色背景。因此,要在IE下获得一致的表现,就必须设置背景和边框的样式。

    在Google Chrome浏览器下,它只有一个“选择文件”的按钮,而没有文本输入框。在用户未选择文件时,显示“未选择任何文件”字样,用户选择文件后,在按钮的右侧显示文件的名称。如图 7‑10 所示:

    文件选择框在Chrome下效果图7-10 文件选择框在Chrome下效果

    为了在所有浏览器下保持统一的风格,常常需要为一个表单中的文本输入框定义宽度、背景和边框:

    
    
    1. input {
    2.     width: 320px;
    3.     background: #fff;
    4.     border: 1px solid #94B6ED;
    5. }

    当然,上述定义对所有的文本输入框均有效,包括文件选择框。然而,不同的浏览器,对文件选择框应用边框的方式却又不同。

    IE浏览器,会为文本输入框和“浏览…”按钮应用相同的边框样式,互不影响。如图 7‑11 所示:

    应用边框后在IE下效果图7-11 应用边框后在IE下效果

    Google Chrome浏览器,会为“选择文件”按钮和右侧文本同时应用边框,边框出现在“选择文件”按钮和右侧文本的周围。如图 7‑12 所示:

    应用边框后在Chrome下效果图7-12 应用边框后在Chrome下效果

    当然,这个并不是真正想要的效果,我们希望Google Chrome下,仅仅在“选择文件”按钮周围出现边框。

    此时,就可以借助CSS Hack技术中的 '\9',让边框只对IE有效。并使用 webkit 内核专有的 ::-webkit-file-upload-button 伪元素,来设置“选择文件”按钮的样式,使IE和Chrome的按钮风格保持一致:

    
    
    1. input {
    2.     width: 320px;
    3.     background: #fff;
    4.     border: 1px solid #7F9DB9\9;
    5. }
    6. ::-webkit-file-upload-button {
    7.     padding: 4px 14px;
    8.     background: #ECE9D8;
    9.     border: 1px solid #7F9DB9;
    10. }

    经过上述处理后,在Google Chrome浏览器中的运行结果如图 7‑13 所示:

    应用边框后在Chrome下效果图7-13 应用边框后在Chrome下效果

    当然,这里只是提供了一种处理问题的思路,并不代表它就是最佳解决方案,显然这种处理方案只对 webkit 内核的浏览器有效,具有很大的局限性。

    既然上述解决方案有很大的局限性,能否换一种思路,设计一个文件选择框,让它在任何浏览器下的表现完全一致呢?

    答案是肯定的。既然大家已经习惯了IE的文件选择框,就可以在表单上包含一个文本框、一个 "浏览..." 按钮和一个文件框,通过文本框和 "浏览..." 按钮,来模拟文件框的外观,而文件框的功能保持不变,只是被隐藏起来了:

    
    
    1. <form action="" method="post" enctype="multipart/form-data">
    2.     <input type="text" id="text" />
    3.     <input type="button" value="浏览..." />
    4.     <input type="file" id="file" />
    5. </form>

    首先,设置文本框和按钮的样式,来模仿文件框的外观,主要是设置其宽度和高度。为了兼容IE6和IE7,还需要设置背景和边框样式:

    
    
    1. input[type="text"]{
    2.     width: 180px;
    3.     height: 24px;
    4.     line-height: 24px;
    5.     background: #fff;
    6.     border: 1px solid #94B6ED;
    7. }
    8. input[type="button"]{
    9.     width: 70px;
    10.     height: 26px;
    11.     background: #ECE9D8;
    12.     border: 1px solid #94B6ED;
    13. }

    然后,让文件选择框使用绝对定位(先要把 form 设置为相对定位),并控制它的尺寸,让它正好覆盖文本框和按钮,还要保证按两个钮正好对齐。再通过透明度,来隐藏文件选择框。这样,用户点击按钮或文本框(现代浏览器下),就等价于点击文件选择框,可以做到以假乱真了。

    
    
    1. form {
    2. position: relative;
    3. }
    4. input[type="file"]{
    5. top: 0;
    6. left: 0;
    7. position: absolute;
    8. width: 260px;
    9. height: 26px;
    10. filter: alpha(opacity:0);
    11. opacity: 0;
    12. }

    使用这种技术设计出来的文件选择框,在任何浏览器下的外观都完全一致。如图 7‑14 所示:

    应用边框后在Chrome下效果图7-14 应用边框后在Chrome下效果

    不过,由于文件框被隐藏,在用户选择文件后,就不能清楚看到自己的选择。其实这也不难,只需少量的 Javascript 代码就可以实现。

    当用户选择文件后,就会触发文件选择框的 onchange 事件,只需在该事件的处理函数中进行相应的处理即可。

    如果是单文件选择框,就非常简单,由于它只能选择一个文件,只需根据 id 获取文件框的值,并将它显示在文本框中即可:

    
    
    1. <input type="file" onChange="text.value = this.value" />

    在HTML5中,为文件选择框新增了 multiple 属性,支持选择多文件。如果是多文件选择框,可以通过一个函数,来遍历文件框的值,并显示在文本框中:

    
    
    1. <input type="file" onChange="text.value = getFiles(this.files)" multiple />

    对于多文件选择框,当用户选择文件后,会将文件保存在 FileList 对象中,它是一个文件的列表,通过遍历该列表,就可以得到每个文件的信息。

    
    
    1. function getFiles(files) {
    2.     var strText = "";
    3.     for(var i = 0; i < files.length; i++) {
    4.         strText += files[i].name + ", ";
    5.     }
    6. return strText;
    7. }

    上述函数中,通过遍历 FileList 对象,通过 name 属性得到每个文件的名称,并把它们用逗号连接起来。于是,用户选择文件后,文本框中就会显示用户所选择的文件列表。如图 7‑15 所示:

    显示选择的文件列表图7-15 显示选择的文件列表

    如果需要,还可以获取文件的大小(size)、类型(type)、最后修改日期(lastModifiedDate)等信息。

    3)单选框和复选框

    单选框和复选框本身很简单,但有一个问题,就是默认情况下,在所有的浏览器中,单选框和复选框都无法与旁边的文本对齐。如图 7‑16 所示:

    单选框和复选框与文本未对齐图7-16 单选框和复选框与文本未对齐

    导致这个问题的原因很复杂,限于篇幅,这里不进行深究,只给出解决方案。其实,这个问题的解决方案也很多,一个比较简单的解决方案,就是让单选框和复选框垂直居中对齐,再设置 -2px 的上外边距和 1px 的下外边距:

    
    
    1. input[type="radio"],
    2. input[type="checkbox"]  {
    3.     vertical-align: middle;
    4.     margin-top: -2px;
    5.     margin-bottom: 1px;
    6. }

    经过上述处理之后,选择框与文本已经对齐,并且,在所有的浏览器中的表现基本相同。在IE下运行结果如图 7‑17 所示:

    单选框和复选框与文本对齐图7-17 单选框和复选框与文本对齐

    select元素

    在表单元素中,下拉列表是最令人头疼的一个元素,因为它的外观非常丑陋,而许多样式对它又不生效。如,字体、文本颜色、边框、背景颜色等,都很容易进行美化处理。但是,任凭怎么美化,默认的下拉箭头始终保持不变,无法直接进行处理。

    这个问题有多种解决方案,相对简单的解决方案是,用一个容器来包裹 select 元素。再为容器应用样式,来模拟下拉列表的样式。

    在实际应用中,可以根据上下文需要来选择包裹 select 元素的容器。如果希望 select 元素独占一行,就用块级容器进行包裹;否则,就用行内级容器来包裹。这里以块级容器 div 为例进行说明:

    
    
    1. <div class="select">
    2. <select>
    3.     <option value="1">北京</option>
    4.     <option value="2">上海</option>
    5. </select>
    6. </div>

    首先,设置容器的尺寸,再指定一个自定义的下拉箭头,作为容器的背景,并让它出现在预想的位置,以便能够遮盖 select 元素的默认下拉箭头。如果希望 select 元素在行内显示,还需要设置 display 属性。

    
    
    1. .select {
    2.     width: 240px;
    3.     height: 34px;
    4.     overflow: hidden;
    5.     background: #fff url(arrow_down.png) 220px center no-repeat;
    6. }

    然后,通过 appearance 属性清除 select 元素的默认样式,并让背景透明,这是本方案的核心,也是最关键的一步。

    再根据需要,设置 select 元素的尺寸、内边界、字体、背景、边框等属性。使用百分比设置尺寸的好处是,在修改容器尺寸时,不必修改 select 元素的样式,让布局更灵活、更独立,可以提高代码的可维护性。

    
    
    1. .select  select {
    2.     width: 100%;
    3.     height: 100%;
    4.     padding: 5px;
    5.     font-size: 14px;
    6.     background: transparent;
    7.     border: 1px solid #94B6ED;
    8.     -moz-appearance: none;
    9.     -webkit-appearance: none;
    10. }

    经过上述处理后,下拉列表的运行效果如图 7‑18 所示:

    下拉列表箭头效果图7-18 下拉列表箭头效果

    当然,可以更进一步美化,当用户执行点击操作后,将向下的箭头动态改变为向上的箭头,使下拉列表更加人性化。这个功能只需简单的jQuery即可实现。

    首先,定义一个类,它让容器使用向上的箭头作为背景图像。

    
    
    1. .selected {
    2.    background-image: url(arrow_up.png);
    3. }

    然后,当jQuery检测到用户执行点击操作后,为容器添加 .selected 类,来改变箭头的方向。点击操作既可以由容器触发,也可以由下拉列表触发,根据实际情况进行选择。

    
    
    1. $(function() {
    2.     $(".select").click(function() {
    3.        $(".select").addClass("selected");
    4.     });
    5. });

    上述这种直接书写代码的方式确实很方便,但它不利于代码的重用。如果把这个点击操作封装为一个函数,再为容器绑定单击事件的处理函数 οnclick="changArrow()" ,可以大大提高代码的重用性。

    
    
    1. function changArrow() {
    2.     $(".select").addClass("selected");
    3. }

    而当鼠标移出容器时,需要删除 .selected 类,来恢复箭头的方向。同理,需要为容器绑定鼠标移出事件的处理函数

    
    
    1. onmouseout="removeArrow()"
    2. function removeArrow() {
    3.     $(".select").removeClass("selected");
    4. }

    现在,下拉列表趋于完美了,用户点击后,会自动把向下的箭头改为向上的箭头,当鼠标移出时,再恢复箭头的方向。运行结果如图 7‑19 所示:

    改变下拉列表箭头图7-19 改变下拉列表箭头

    表单按钮

    默认的按钮非常丑陋,并且不同浏览器下的外观又不尽相同。如果使用图像按钮,还需要向服务器请求图像,会增加服务器的额外负担。因此,使用原生的表单按钮,再使用纯CSS进行美化,才是最佳的选择。

    HTML中,共有三类表单按钮,分别是提交按钮、重置按钮和普通按钮,无论哪种按钮,美化方法完全相同。

    其实非常简单,首先设置按钮文本的颜色、字体,在通过 padding 属性文本在按钮中的位置,再根据上下文的风格,设置按钮的背景颜色。为了让按钮有一点立体感,可以增加一个边框,让边框跟背景使用相同色系,但颜色稍深一点:

    
    
    1. input[type="submit"] { 
    2.     color: #fef4e9;
    3.     font-size: 16px;
    4.     font-family: "Microsoft YaHei";
    5.     padding: .4em 2em .45em;
    6.     background: #f78d1d;
    7.     border: 1px solid #da7c0c;
    8. }

    当鼠标悬停到按钮上时,通过改变背景颜色,来提醒用户:

    
    
    1. input[type="submit"]:hover {
    2.     background: #f47c20;
    3. }

    上述按钮可以适应于所有的浏览器,并在所有浏览器下的表现完全相同。为了在现代浏览器下表现得更好,可以通过圆角、文本阴影,对按钮进行渐进式增强,并通过盒阴影和渐变背景,让按钮的立体感更加逼真:

    
    
    1. input[type="submit"] { 
    2.    
    3.     border-radius: 4px;
    4.     text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    5.     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    6.     background: linear-gradient(180deg, #faa51a, #f47a20);
    7. }

    在Chrome浏览器下的运行效果如图 7‑20 所示:

    表单按钮图7-20 表单按钮

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • 基于layer好看的建站模板,包含基本的表单,通知单样式的美化界面,搭建后台管理框架的不二之选
  • 如下所示: [removed] {{# if(d.status === 1){ }} 正常 {{# } else { }} 禁用 {{# } }} [removed] layui.use(['layer', 'form','table'], function(){ layer
  • 如下所示:var html = ''+ '角色名'+ '角色描述'...layer.open({type : 0,title : '添加角色',area : [ '500px', '400px' ],shadeClose : true, // 点击遮罩关闭content : html,btn : [ '确认', '取消' ],success : ...
  • 1、先定义这个添加项目的表单表单样式根据你使用的前端框架来决定,但一定要注意两点 (1)不要赤果果的直接把表单呼上去,要在外面再套一层div,我把他放到一个行里 (2)要将他的可见性,设成display:none...
  • layui的layer弹出层和form表单

    万次阅读 多人点赞 2019-06-27 22:33:12
    文章目录弹出层layerform表单增删改查所有代码 如果想用layui来完成增删改查,那么要会用弹出层和form表单这两个组件是必须的,所以今天就来介绍一些如何用layui完成基本的增删改查 弹出层layer 因为layui的特性,...
  • $("#formAdd").Validform({ tiptype: function (msg, o, cssctl) { if (o.type == 3) {//失败 layer.tips(msg, o.obj, { ...
  • layer 弹窗

    2021-03-22 19:50:07
    layer 是layui的一个弹出层组件,但是可以作为独立组件使用。单独使用去layer官网下载独立组件包,并且需引入jQuery1.8以上版本。 引入好layer.js后,直接用即可 <script src="layer.js"></script> <...
  • 修改Layui表单验证提示框样式

    千次阅读 2019-10-02 16:11:57
    一直以来都认为layui挺好看的,包括它的弹层组件layer,不过今天恰好碰到了layui表单验证弹框的位置和样式不能调整的问题;它的默认样式是这样的: 因为我页面布局的关系,弹框挡住了按钮,所以我决定得修改一下...
  • 安装:下载源码到本地layer: 丰富多样的 Web 弹出层组件,可轻松实现 Alert/Confirm/Prompt/普通提示/页面区块/iframe/tips 等等几乎所有的弹出交互。目前已成为 Web 弹层的首选解决方案...
  • layer.js

    千次阅读 2016-12-15 20:02:48
     我们提到的基础参数主要指调用方法时用到的配置项,如:layer.open({content: ''})layer.msg('', {time: 3})等,其中的content和time即是基础参数,以键值形式存在,基础参数可合理应用于任何层类型中,您不需要...
  • var beizhu = data.beizhu if (opVal_input) { if(opVal_input===data.opVal){ layer.close(index);//没变更 return false } $.ajax({ url: url, type: 'POST', dataType: '...
  • layui抓取表单数据

    千次阅读 2020-12-30 10:16:10
    注意事项:1、layui 中提交按钮是基于“监听”机制实现的。2、form.on() 的调用需置于 layui.use 的回调...抓取表单数据可按四步来实现:1、禁用按钮。防止用户连续点击,需注意,在 Ajax 请求结束后(complete)再...
  • 1、select无法显示或选择,则在弹窗加载完成时,使用form.render('select'); 2、input表单无法动态赋值,则使用$("input").attr('value', 值);
  • validForm结合layer制作表单验证提示

    千次阅读 2017-02-17 18:32:52
    首先要引入jquery,Validform和layer<script src="../js/jquery.min.js"></script> <script src="../layer/layer.js"> <script src="../js/Validform_v5.3.2_min.js"></script>form表单带代码 <u
  • layerForm

    2021-04-08 10:16:16
    layerForm基于layer开发 部分功能通用 layer参考文档 基础配置 { id: null, //窗口id postData: null, //请求参数 type: 2, // 基本层类型0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层) ...
  • 使用layer时候,Select组件下拉不显示的问题 在使用layer的时候,碰到了这样一个问题, 使用的ant-design组件哭的时候, Select组件中的下拉...解决很简单, 只要在index.css或其他样式文件中设置z-index大于layer的z-inde
  • 插件描述:原生JS编写的弹窗控件ModalLayer,使用了ES6的一些新特性.更新时间:2020-01-07 00:27:13简介由原生JS编写的一套弹窗控件, 写的可能不是很好, 可能会尝试一些之前没用使用过的技术(小白鼠?), 会尽力完善的...
  • skin: 'layui-layer-molv' //样式类名 自定义样式 , closeBtn: 1 // 是否显示关闭按钮 , anim: 1 //动画类型 , btn: ['确定', '取消'] //按钮 , icon: 6 // icon , yes: function () { //layer.msg('确定') $....
  • layer弹出层详解

    千次阅读 2019-01-22 11:25:10
    前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的)。 layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,...
  • 3、使用Esc键也可以关闭弹出层;4、它是响应式的,并且...HTML1、首先我们在页面放置一个用来触发弹出层的链接,也可以是个按钮button,注意的是我们给它设置一个data-show-layer属性,这个属性值对应的就是弹出层...
  • script src="${base}/res/layer/layer.js" type="text/javascript"></script> <script src="${base}/res/ywpx/js/jquery-form.js" type="text/javascript"></script> //layer的css样...
  • layer.js 方法

    千次阅读 2018-03-25 14:02:44
    内置方法layer.config(options) - 初始化全局配置这是一个可以重要也可以不重要的方法,重要的是,它的权利真的很大,尤其是在模块化加载layer时,你会发现你必须要用到它。它不仅可以配置一些诸如路径、加载的模块...
  • 1.提示层在鼠标经过的情况下出现,鼠标移开消失,且需提示的文案是...$(document).on('mouseenter', '#layui-layer-tips', function () {layer_tips = layer.tips('我是固定文案!', '#layui-layer-tips', {time: 0...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,325
精华内容 3,330
关键字:

layer表单样式