How to narrow the text box width in Bootstrap and add a verification code image,

Source: Internet
Author: User

How to narrow the text box width in Bootstrap and add a verification code image,

Today, the project manager just handed over a job and asked me to implement this function: the verification code text box should be narrowed a bit, and a verification code image should be added to the right side, in addition, the verification code image can be kept in the same line as the verification code text box during mobile access in a responsive layout. How can this problem be solved? It was difficult for half a day. Later, I found the implementation idea. The following small series will share my thoughts and implementation process with you. If you have any questions, please join us to learn and make progress!

Implementation ideas:

Implementation

Add the bootstrap grid layout code to it to control the layout under different resolutions.

The only prerequisite for achieving this is that the height of your verification code image must be the same as that of the input box (the height of the input box is approximately 34px ).

Then it's easy. Let the verification code picture overlap in the input box and use the absolute layout.

PS: Remember to add a padding-left value to the input box (slightly greater than the width of your Verification Code). Otherwise, the text will be blocked.

<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"> Verification Code <small> click the picture to refresh the Verification Code </small> </label> <div class = "input-group">  <input type = "text" class = "form-control" id = "validateCode" name = "validateCode" placeholder = "four-character Verification Code "> </div>

Show me the solution for the subject. This is a website I am writing. The image size fits the height of the Input box. You do not need to change the input width so that the verification code image can cover the input box, then add a padding-left value to the input. The size is slightly greater than the image width of the Verification Code. It is inconvenient for the mobile phone to answer questions.

The above section describes how to narrow the text box width in Bootstrap and add a verification code image. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.