score:0
wrap the email address field and password field inside a div as below.
<div class="email_wrap">
<input type="email" id="icon1" placeholder="enter email address"/>
</div>
<div class="password_wrap">
<input type="password" id="icon2" placeholder="enter password"/>
</div>
<style>
.email_wrap{width:100%;float:left;position:relative;}
.password_wrap{width:100%;float:left;position:relative;}
.email_wrap::before{content:url(../images/login-mail.png);position:absolute;left:5px;top:5px;}
.password_wrap::before{content:url(../images/login-password.png);position:absolute;left:5px;top:5px;}
</style>
note: adjust the top and left css of the before element based on your design to suit your design.
Source: stackoverflow.com
Related Query
- How to separate icon and input type text box and to move the div to the right corner?
- How to limit the text filed length with input type number in React JS and prevent entry of E,e, -, + etc
- how to validate date based on input type text and display the day according to input date in react
- How can i move a text right of the screen and back to left of screen
- MaterialUI how to align text inside an Input to the right or center?
- How to set defaultValue, value={this.props.value}, and update the value of a text input with React?
- How to move two buttons one to the left and the other to the right in the same inline?
- Div container with text on the left side and overflow image on the right
- How to position expand icon on the right side of the accordion while keeping the text in the center?
- How to change the background color of the div while focusing the text Input field?
- How to convert a div to input and then the input into div (onclick)
- How to type unique letters only in input text box in html or react?
- How to individually change text color and font weight in the same div element using Tailwind CSS and React
- How to use check box in forms and control the input fields
- How to move div from left to right hand side of the screen on scroll in ReactJS?
- How can I combine onBlur and onFocus in my React Component without reselecting the text on every letter I type in?
- How to show hidden icon and remove text when the button is clicked
- How to search in a json array, and return the result as I type in the input
- How to get the details of input text and send it to bacend in ReactJs
- How can I align my text and put the button on the extrem right of my gray bar?
- How to vertically align button content and the icon in the same line and icon on the extreme right of button in tailwindcss?
- Change input with type file to an icon - how can I delete path preview and change styling? React, JS
- How can I make a small space here between the icon and text
- How to place an element at the left and right side of overflowing div
- Upon clicking a button, how can I input the text from the button into an alert? (And how to disable and leave buttons selected)
- How to fetch input from text box and print in React?
- ReactJS: How To Get Input Value From The Prompt Box And Update It To Database
- How do I move a list to the right in my navbar? in reactjs and css
- How to validate and display the year in input box only if it is within the given range
- how to remove the outline and box shadow on input tag in react-select
More Query from same tag
- Issue with Semantic ui react calendar
- Webpack collecting wrong src path
- Jest & react-router-dom: React.createElement: type is invalid -- expected a string (for built-in components) ... but got: undefined
- React Admin is not showing Search Bar
- Cannot read property 'props' of undefined ReactJS
- How do I reset select elements in a React form after submission?
- React MODULE_NOT_FOUND error even if it should be correct
- Antd Pro Table remove default search buttons and Implement Debounce
- How can I pass a child component's state up to the parent?
- State is Empty but the Action is loading the data
- Why my react `Carousel` does not render properly?
- ReactJs - MaterialTable pagination, row per page not working
- How does React Developer Tools determine that the webpage is using React?
- React - use single event handler to set state for multiple inputs?
- Best way to handle two similar type of useEffect functions in React?
- Dynamic route not working on page refresh with Next.js
- JsPdf-autotable display item in the same line
- Rendering material-ui-next Checkbox inside a Redux Form
- Timer with React cannot read property seconds of undefined
- How to use Set with react's useState?
- Mapping answers based on an ID
- react state change doesn't work as expected
- How to identify React component tags after build in a CRA app?
- How should I check if the password is weak or good After applying PasswordStrengthBar?
- How to re-route correctly in React.js? Always renders white page
- React - How to assign flow type to an exported module?
- Multiple web in one domain
- Error serializing `.remarkBody` returned from `getStaticProps` . Reason: `undefined` cannot be serialized as JSON
- Issue iterating through array and making an api get request with each iteration: getting status 429 - to many request
- ReactJS: How to overlay a component on top of another component's element?