Position the image to the left of the input box and align the text to the right

I have positioned the image to the left of the input box, but the text is overlapping the image. How can I prevent this overlap? While the image is correctly aligned on the left, I need the input text to be aligned on the right side of the image without any overlap

CSS
input {
background: url(../../core/images/search.png) no-repeat center left 5px #FFF;
text-align: left;
padding: 5px;
font-family: 'Raleway', sans-serif;
color: #444;
border: 3px solid #FFF;
outline: none;
border-radius: 3px;
margin: -4px 20px;
position: absolute;
width: 270px;
}

HTML
<input type="text" autocomplete="off" name="name">
htmlcss

Answer №1

Apply a padding-left style to the input element based on the width of an image.

Answer №3

Implement the text-index attribute for formatting:

text-index:(picture's width + gap between pictures and first letter)px;

Alternatively, you can achieve spacing from the picture using padding-left:10px;.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble getting the hover effect to work when selecting a different section of the SVG

In my SVG checkbox design, I have a circle element surrounding a polyline element (which acts as the checkmark). The boundaries of the icon extend beyond the circle, causing hover styles to trigger even when hovering outside the circle. I want to change st ...

cssreactjsstyled-components

Troubleshooting jQuery's issue with dynamically adding input fields

I came across a tutorial (which I tweaked slightly) on this website: code In JSFiddle, everything works perfectly fine with the code. However, when I implemented it on my actual page, it's not functioning as expected. I've been trying to trouble ...

javascriptjqueryhtml

Scrolling horizontally is an option depending on the content displayed on the screen

Imagine having a webpage structured like this: <header>...</header> <body> <section id="A">...</section> <section id="B">...</section> <section id="B2">...</section> <section id="C">...&l ...

javascriptjquerycssweb

Having trouble with fetching data in React?

I am a beginner in React and attempting to create a dynamic table component that can adjust based on the headers and rows passed as props. After following Facebook's React tutorials, I have encountered a roadblock. I have made some changes based on s ...

javascriptphphtmlreactjs

Setting the button value to a textbox and refreshing the status information (Codeigniter)

How do I pass the value of my "ACTIVE" status attribute to my textbox? I want to update the user's status by clicking the ACTIVE button. The user's status is currently pending. While I can easily pass the userID, I'm facing an issu ...

javascripthtmlcodeigniter

Guide to modifying the behavior of a dynamic dropdown menu

Jquery: $('body').on('change', '.combo', function() { var selectedValue = $(this).val(); if ($(this).find('option').size() > 2) { var newComboBox = $(this).clone(); var thisComboBoxIndex ...

jqueryhtmlcombobox

Having trouble centering an element with Bootstrap's offset feature in CSS

Here is the HTML code I am working with: <div id = "search_form" > <h1> Looking for travel ideas? </h1> <div class="input-group"> <form action="" method="get" id = "search-form" > {% csrf_token %} ...

htmlcsstwitter-bootstrap

The alignment in the center is lacking consistency

Is anyone else experiencing issues with the duration and current time text not staying centered vertically? It seems to be a hit or miss, sometimes centering correctly and other times not. What could be causing this inconsistency, especially when no code c ...

htmlcss

When clicking on the HTML div element, it will be appended to the application

Within my vertical menu, there are 5 items including web design and mobile app. When clicked on these items, they reveal their respective href attributes as shown below. <div class="col-md-3"> <ul class="nav nav-tabs nav-stacked"> ...

javascripthtmlcss

Stop the click event using a confirmation dialog before proceeding with the operation

I'm trying to implement a confirmation dialog before deletion by using e.preventDefault() to prevent immediate deletion. However, I am facing an issue in the YES function where I would like to resume the click event's operation with return true w ...

javascriptjqueryhtmlcssalertify

The overflow scroll feature seems to be malfunctioning and not working as intended in the

I'm trying to implement the overflow scroll property in a div to display a scroll bar for the user, but I'm facing issues. I'm unsure what the problem could be. The code I'm working with can be found here : http://fiddle.jshell.net/Gg ...

htmlcssoverflow

Vertical alignment in Bootstrap's navbar-header using CSS

Is there a way to center the brand vertically on a custom-sized navbar? .navbar { min-height: 120px; } .navbar-nav > li > a { line-height: 120px; } http://jsfiddle.net/0tkaya44/ ...

csstwitter-bootstrap

Issues with the alignment of columns using Bootstrap framework

I've created a design in Photoshop using the Bootstrap 12-column guide, but when I try to implement it using Bootstrap, the results are completely off. https://i.stack.imgur.com/vQwOt.png Here's my HTML code: <!DOCTYPE html> <html lan ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

embedding several iframes within an HTML document

Is it possible to use multiple iframes without them stacking on top of each other? Can anyone provide tips on how to align and position iframes wherever needed? Additionally, is there a way to remove the scrollbars from iframes? ...

htmliframe

Encountering a problem when trying to use event.target.value in an Angular TypeScript application

Here is the code from my app.component.html : <h1>Password Generator</h1> <div> <label>Length</label> </div> <input (input)="onChangeLength($event.target.value)"/> <div> <div> <input ...

htmlangulartypescript

Keep the footer consistently at the bottom of the page

Seeking advice on creating a footer that remains at the bottom of the page even when scrolling. How can I achieve this in the most effective way? Note: I have not written any code yet, just exploring how to accomplish this task optimally. ...

htmlcss

Troubles with CSS Selectors in Internet Explorer 6

When I tested my website on Internet Explorer 6, I noticed a problem with the global navigation. Specifically, when I clicked on the ABOUT ME page, the image in the navigation did not match the active page. Although CONTACT US was displayed instead of abou ...

csswordpressinternet-explorerinternet-explorer-6

svg animation code may not be functional on Edge browser, while it operates smoothly on all other browsers

I've been experimenting with a svg typewriter effect by setting dashoffset and dasharray to 1000 or 500. The animation works on Chrome, Safari, Firefox, and my PC, but it doesn't work on Microsoft Edge. I'm struggling to make it work specif ...

htmlcssanimationsvgmicrosoft-edge

Find the identifier that does not currently exist in the collection of objects

There is a situation where I have an array and an object that consists of arrays of ids, which are essentially permission objects. My goal now is to extract the ids that do not exist in the given object. Can someone assist me with devising the necessary l ...

javascripthtmlangulartypescript

Creating PDFs with Puppeteer and math expressions using the page.$eval function

I have recently started using Puppeteer and have successfully converted an entire website to PDF. However, I am facing a challenge when trying to convert MathJax equations within a div to PDF. Currently, I am using the following code: // Requiring puppetee ...

javascripthtmlnode.jspuppeteermathjax