Today, the project manager just gave me a job and asked me to implement such a function: what I want to achieve is to narrow the verification code text box, and then add a verification code picture to the right, and in the case of responsive layout, the verification code picture can be kept on the same line as the verification code text box when accessing the mobile terminal. How to do this? It’s been difficult for a long time, and later I found the idea of realization. The editor will share my ideas and implementation process with you. If you have any questions, please ask them and learn and make progress together!
Implementation ideas:
Implementation renderings
Add bootstrap's grid layout code to it yourself to control the layout under different resolutions.
The only prerequisite for this implementation is that the height of your verification code image needs to be the same as the height of the input box (the height of the input box is about 34px).
After that, it will be simple. Let the verification code image overlap on the input box and use absolute layout to complete it.
PS: Remember to add a padding-left value to the input box (just greater than your verification code width), otherwise it will block the text.
<style>#captcha {border-radius: 2px;cursor: pointer;position: absolute;z-index: 3;left: 0;top: 0;}#validateCode {padding-left: 110px;}</style><div><label for="validateCode">Verification Code<small>Click on the image to refresh the verification code</small></label><div><img id="captcha"src='data:image/png;base64,{{Captcha::doimg()['imgCode']}}'><input type="text"id="validateCode" name="validateCode"placeholder="Four-digit character verification code"></div></div>Let me show the questioner my solution. This is a website I am writing about. The size of the image is in line with the height of the Input box. There is no need to change the input width. Just let the verification code picture cover the input box. Then add a padding-left value to the input. The size is slightly larger than the width of the verification code picture. It is inconvenient to answer questions on your phone. I will explain it in detail when I go back.
The above is the implementation method of the text box in Bootstrap that I introduced to you by narrowing the width of the text box and adding a verification code picture. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!