Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法

今天项目经理刚交给一个活儿，要我实现这样一个功能：要实现的是验证码文本框变窄一点，然后右边加入一副验证码图片，并且在响应式布局的情况下在移动端访问的时候验证码图片能保持和验证码文本框在同一行，这个怎么做？难为了半天，后来找到了实现思路，下面小编把我的想法及实现过程分享给大家，有问题欢迎提出，共同学习进步！

实现思路：

实现效果图

自己往里面加入bootstrap的栅格布局代码，控制在不同分辨率下面的排布情况。

这样实现唯一的前提条件就是你的验证码图片高度需要和input框的高度一样(input框的高度大概是34px)。

之后就简单了，让验证码图片重叠在input框上面，使用绝对布局就可以完成。

PS:记住要给input框加上一个padding-left值(略微大于你的验证码宽度即可)，不然会挡住文字。

<style>
#captcha {
border-radius: 2px;
cursor: pointer;
position: absolute;
z-index: 3;
left: 0;
top: 0;
}

#validateCode {
padding-left: 110px;
}
</style>
<div class="form-group col-md-6">
<label for="validateCode">验证码
<small>  点击图片刷新验证码</small>
</label>
<div class="input-group">
<img id="captcha"
src='data:image/png;base64,{{Captcha::doimg()['imgCode']}}'>
<input type="text" class="form-control"
id="validateCode" name="validateCode"
placeholder="四位字符验证码">
</div>
</div>

给题主看看我的解决办法，这是我在写的一个网站，图片的大小是契合Input框的高度的，无需更改input宽度，让验证码图片遮住input框即可，然后给input加一个padding-left值，大小略大于验证码图片宽度即可，手机答题不方便，回去再细说。

以上所述是小编给大家介绍的Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法

    Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法

    今天项目经理刚交给一个活儿,要我实现这样一个功能:要实现的是验证码文本框变窄一点,然后右边加入一副验证码图片,并且在响应式布局的情况下在移动端访问的时候验证码图片能保持和验证码文本框在同一行,这个怎么做?难为了半天,后来找到了实现思路,下面小编把我的想法及实现过程分享给大家,有问题欢迎提出,共同学习进步! 实现思路: 实现效果图 自己往里面加入bootstrap的栅格布局代码,控制在不同分辨率下面的排布情况. 这样实现唯一的前提条件就是你的验证码图片高度需要和input框的高度一样(input框

  • 用flash as脚本 控制 Flash中文本框样式的代码

    经常看到Flash留言簿中的文件框可以动态修改其样式,今天写了一个小实例供大家学习!转载请保留:蓝光 BlueShine 效果如下: /upload/20071124121452211.swf 复制代码 代码如下: var Style = new TextFormat();   //定义一个文本格式   style_txt.borderColor = 0xdddddd;   size_txt.borderColor = 0xdddddd;   style_txt.htmlText = "<

  • 浅谈java中文本框和文本区

    在图形界面中,文本框和文本区是用于信息输入输出的组件. 文本框 文本框(JTextField)是界面中用于输入和输出一行文本的框.JTextField类用来建立文本框.与文本框相关的接口是ActionListener. 文本框处理程序的基本内容有以下几个方面: 1.声明一个文本框名. 2.建立一个文本框对象. 3.将文本框对象加入到某个容器. 4.对需要控制的文本框对象注册监视器,监听文本框的输入结束(即输入回车键)事件. 5.一个处理文本框事件的方法,完成对截获事件进行判断和处理. JText

  • bootstrap中模态框、模态框的属性实例详解

    bootstrap中模态框、模态框的属性实例详解

    工作中有需要用到模态框的可以看看 <div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false

  • javascript中文本框中输入法切换的问题

    可以通过设置ime-mode在页面输入控件中关闭输入法 希望关闭输入法:< input style ="ime-mode:disabled" > 希望使用当前输入法:<input   style="ime-mode:active"> 当某个文本域不需要中文输入的时候,我们可以通过设置 ime-mode 属性值为 inactive 或者 disabled,减少错误的可能性.同样的我们可以设置那些需要中文输入的文本域的 ime-mode 属性值为

  • asp.net中利用ajax获取动态创建表中文本框的值

    假设现在主表为公司表(公司ID,公司名称,公司类型,公司规模),从表为部门表(部门ID,公司ID,经理,联系电话),现在一个公司有四个部门,要在同一个页面上录入公司信息以及四个部门的信息,如何动态创建部门信息录入口,以及如何获取数据存储到数据库中,请看下面的代码. 页面HTML代码及js脚本 代码 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.

  • js实现文本框宽度自适应文本宽度的方法

    js实现文本框宽度自适应文本宽度的方法

    本文实例讲述了js实现文本框宽度自适应文本宽度的方法.分享给大家供大家参考.具体如下: 一个会随着输入文本框的字符多少而自动增加宽度的JS代码,当我们在文本框中输入字符的时候,如果文本框的宽度定义太小的话,那么我们输入的字符将会被隐藏,本段代码实现了文本框会自动适应输入文字的多少,它会自动加长. 运行效果如下图所示: 具体代码如下: <!Doctype HTML PUBLIC "-//W3c//DTD Html 1.0 Transitional//EN"> <html

  • js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器 原创

    很多网站实现了利用JS保存页面中文本框内容到本地,并另存为指定文件扩展名与编码类型的功能,特别是一些代码教程,JS特效站上更是长见.如何利用JS实现这种功能的呢,下面给出了具体的实现代码 首先建立HTML文件,具体代码如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body&

  • css文本框与按钮美化效果代码

    css文本框与按钮美化效果代码

    一.先看看在网页中经常出现的按钮与文本框的本来面目吧! 对照上图,我们怎么样才能改变文本框与按钮的模样呢?那在下面我为大家提供两种文本框与按钮样式作为例子参考,第一种是文本框与按钮无立体感,只是有线 条颜色与填充颜色的,这种效果大家可能在很多网站上都看见过,给人一种特别的感觉,很不错的,第二种效果就比较特殊了,是将文本框做成一种类似于下划线的 效果并且是彩色的,同时按钮的背景色也不再是灰色,而是彩色的,可以说这是一种非常酷的效果,好了,下面我就来说说这两种效果实现的详细操作步骤吧. 二.无立体效

  • wxPython修改文本框颜色过程解析

    wxPython修改文本框颜色过程解析

    这篇文章主要介绍了wxPython修改文本框颜色过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 由于工作需要使用wxPython实现一个美观的新增数据界面,这个界面上的文本框要像html中文本框一样可以设置边框颜色,和字体垂直居中. 当时也看了许多资料,发现wxpython并没有提供这样的修改方法,后来,花了一段时间,想出基于wxpython,自定义文本框控件. 具体思路如下: 1. 去除现有wxpython 的wx.TextCtrl控

随机推荐