Reasonable layout of mobile login page?

as shown in the figure, how should the part in the circle and the input box be laid out properly? The current idea is:
1, input+ background icon + button button positioning; (style is less, shortcomings: positioning)
2, div is covered with img+input+button button; (easy to achieve, more styles)
3, div+flex (compatibility is not very good, need to add a variety of prefixes)
currently js uses jq to write, other ui plug-ins do not consider currently, hope bosses to analyze, how to reasonable layout? Or is there a better plan?

Css html

Mar.31,2021

The final solution 2 of

is to replace the img with the background image of lable, and then. Frantically play with various styles ~

Previous: The value in state in Vuex has changed, but the page does not work.

Next: How to control the slow growth of 3D curves created by threejs

Multiple choice questions, how to judge whether the chosen answer is the correct answer?
I got a set of data, which is to choose the type of question. How can I tell if I have chosen the right one answera: "Olympic Games " answerb: "Asian Games " answerc: "Paralympic Games " answerd: "University Games " id: "1772 " question: "f...

Javascript css html

Feb.26,2021
The problem of uploading attachments to the mobile version
do the gods have plug-ins for uploading attachments in the mobile version that can also be uploaded more than one? ...

Html5 node.js css html javascript

Feb.26,2021
What is the current level of support for vw,vh layouts in mobile browsers?
what is the current level of support for vw,vh layouts in mobile browsers? ...

Html5 javascript css html

Feb.26,2021
How to implement fixed positioning relative to a specified parent element
the traditional position: fixed; is relative to the window, and there are two main points of the problem . relative to the specified parent element fixed positioning encountered the following problems in mobile development. The green box is the...

Css html javascript

Feb.26,2021
Let table be able to separate different colors?
want to explain how to make table different colors? is not different. is . <table> <tr> <td width="100">a< td> <td><a>< td> < tr> <tr> ...

Jquery css3 css html5 table

Feb.26,2021
Vue page switching fixed positioning problem?
<template> <div style="height: 100%;"> <mt-header title=""> <mt-button icon="back" slot="left" v-tap="{methods: switchView, view: Post }">< mt-button> &l...

Css3 css html5 vue.js

Feb.27,2021
Abnormality of absolute positioning position caused by Device Pixel Ratio
there is a problem in the process of development these two days. The device pixel ratio of the computer developed by the company is 1.25 . assume the following HTML and CSS: this does not happen on computers where devicePixelRatio is 1 . ...

Css html

Feb.27,2021
Does JS judge multiple clicks on the same button?
as shown in the figure, there are four sort buttons in a table header, and the requirements are as follows: the first click on descending order, the second click on ascending order, and the third click on the default display (no sorting); I would li...

Css html javascript

Feb.27,2021
Why can vue-router not be put into production environment?
shouldn t vue use vue-router? Why can it only be put into devDependencies (development dependency)? ...

Css html5 html javascript node.js

Feb.27,2021
The problem that the connection of graph diagrams is not online in ECharts.
use series [I]-graph.data [I] .name can be displayed normally, but do not want to use name. returned data format: [ { "mName":"", "depth":2, "name":"", ...

Echarts3 css html html5

Feb.27,2021
On the problem of using relative paths to introduce pictures in ant-design-pro-site
modify the markdown file under the ant-design-pro-site site and use the relative path to introduce the picture in the markdowm file. attachment: the picture was originally introduced using the http path. <img src=". images 1.jpg" > ...

Javascript css html

Feb.27,2021
How is the click event realized? Trigger click event?
< script > (function($, doc) { $(".save").click(function(){ alert(1) }) $.init(); $.ready(function() { ** * * ; * @param {Object} obj * @param {String} para...

Javascript php css html

Feb.27,2021
As shown in the red border, select the effect of input.
Icon shows the red part. Choose how to write the effect in css ....

Vue.js html5 javascript css html

Feb.27,2021
How to solve this asynchronous problem? Why is the array out of console.log always o?
o ...

Java html css html5 javascript

Feb.27,2021
How to get style attribute values in an inline style
directly above the picture, how to take this top value ...

Html5 css html javascript

Feb.27,2021
How to achieve automatic focus and jump in vue?
as shown in the figure, v-for generates input, in Vue. When the add button is clicked, the cursor automatically focuses on the latest input, window and automatically moves to the appropriate location! ...

Css html javascript vue.js

Feb.27,2021
The height of td is stretched out, how can it be 100%?
The height of td is stretched by the height of other td, so the work schedule cannot be centered vertically. ...

Javascript php css html html5

Feb.28,2021
The content of element-ui table is not centered vertically
how to make the content of table not be centered vertically? you can set valign= "top " in html, then how to set it in element The table is centered vertically when it is stretched out, and the working hours are aligned with the one at 8 o clock . ...

Javascript css html html5

Feb.28,2021
How to display 5 div sequentially with js
div1 {display: none} div2 {display: none} div3 {display: none} div4 {display: none} div5 {display: none} setTimeout (function) { var obj=document.getElementById ( "div1 "); obj.style.display= "inline "; }, 2000) how to display with settimeout...

Css html html5 javascript

Feb.28,2021
How can an div, draw countless concentric circles with only css?
this is a face-to-face question for Xiaomi. There is only one div, in html. How can you draw countless concentric circles only using css? the only way I can think of is to use pseudo elements (before and after),) and then position them, but only three ...

Css html

Feb.28,2021