Insert an icon directly into a text input box

I'm attempting to insert an icon into a text input field.
For example:

One approach is to utilize background-image and then apply padding-left.

However, I am interested in using CSS sprites. I have experimented with the following code:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

    .input {
        padding-left:35px; 
        width: 128px;
        background: Red;

    }

    .sprite:before{
        background: url('http://img45.imageshack.us/img45/4259/buildingssheet7dv.png');
        content: " ";
        position: absolute;
        height:32px;
        width:32px;
        margin: -10px 0 0 -10px;
        z-index:100;
    }


    .sprite:before {
        background-position: -32px 0;
    }

    </style>
</head>
<body>

    <input type="text" class="input sprite"></input>

</body>
</html>

Any idea what could be going wrong?

cssinputiconscss-sprites

Answer №1

I apologize for the confusion regarding why your solution may not be working. I attempted to test it myself, but I included a -Tag within another -Tag.

How about trying something like this as a quick and simple solution?

Or were you referring to achieving a result similar to: "One solution is using background-image and then use padding-left." ?

<!DOCTYPE html>
<html>
<head>
<style>
input
{
    width: 250px;
    height: 65px;
    padding-left: 85px;
}
img.home
{
    width:85px;
    height:65px;
    background: url('http://img45.imageshack.us/img45/4259/buildingssheet7dv.png') 0 0;
    position: absolute;
    left: 10px;
    top: 10px;
}

</style>
</head>

<body>
<input type="text" class="input"/><img class="home">
</body>
</html>

Answer №2

If you were unable to view the image and had trouble figuring out the desired effect, it would be challenging to answer that yourself. One thing that is clearly incorrect in the example markup is the use of :before in an input element. According to this answer, pseudo-elements like ::before and ::after should only be used with containers.

A simple modification to your markup as shown below could help get you closer to achieving your goal:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

.input {
    padding-left: 35px;
    width: 128px;
    background: Red;
}

.sprite:before {
    background: url('http://img45.imageshack.us/img45/4259/buildingssheet7dv.png');
    content: "";
    position: absolute;
    height: 32px;
    width: 32px;
    margin: -10px 0 0 -10px;
    z-index: 100;
}

.sprite:before {
    background-position: -32px 0;
}

</style>
</head>
<body>

<div class="sprite">
    <input type="text"class="input"></input>
</div>

</body>
</html>

This revised code snippet might put you on the right track towards achieving your intended outcome.

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

The hover dropdown remains active even after the mouse has left

I've created a script for displaying a dropdown menu on small screens with a click (or tap on mobile), but I want it to change to hover when the screen size is larger. Here's my code: $(document).ready(function() { var open = false; ...

javascriptjquerycss

A guide on efficiently parsing a file in C, line by line, when the format is already known

Here is the layout of the specific file: month day hour:min:sec process: message For instance: Aug 13 12:20:34 automount[1478]: add_host_addrs: hostname lookup failed I am currently attempting to go through each line one by one and check if the 'm ...

cfileinputiooutput

What is the most efficient way to display a dynamic alphabetical order list?

sample code: <table width="100%" cellspacing="0" cellpadding="0" border="0" style="line-height: 1.7;"> <tbody> <?php $this->db->select('*'); $this->db->from('cm_options'); ...

phpcssmysqlcodeigniter

Can CSS styling be applied to lazy-loaded images using Gatsby and Sharp before they finish loading?

I am utilizing Sharp to implement lazy loading for images on my Gatsby website. Currently, the images appear blurry and only come into focus once they enter the screen. Is there a method to add CSS styles or filters to these blurry images while they are s ...

cssreactjsgatsbysharp

A slender gap of white space delicately separates the transformed parent from its offspring

When trying to align a parent div with a child div that has the same background-color as the parent's border-color, I am encountering an issue. Despite my efforts, there seems to be a thin line of whitespace separating the two divs. It is worth notin ...

css

A step-by-step guide on extracting the image source from a targeted element

Here is a snippet of my HTML code containing multiple items: <ul class="catalog"> <li class="catalog_item catalog_item--default-view"> <div class="catalog_item_image"> <img src="/img/01.png" alt="model01" class="catalog_it ...

javascriptjqueryhtmlcss

Is there a way to identify all the elements that have properties like border and border-radius applied to them?

When looking for elements with certain properties, you can use queries like this; $$('*[title]') For example, if you want to find elements with a border or border-radius applied, standard queries may not work. $$('*[border-width]') // ...

csscss-selectors

The Angular material datepicker fails to organize items in a horizontal row

My web application features an Angular Material datepicker, however, I am facing an issue where not all elements are showing up in a row. The view is as follows: Datepicker To prevent any custom CSS from impacting the view, I have removed all customized ...

cssangularangular-materialdatepicker

Uploading images using the Drag and Drop feature in HTML

Hello, I'm having an issue with the drag and drop functionality. I want to expand the size of the input to cover the entire parent div, but for some reason, the input is appearing below the drag and drop div. Can anyone assist me with this? https://i. ...

javascriptjqueryhtmlcss

Creating a text gradient in CSS with a see-through background

Picture for Inspiration Example of HTML Design <div class="Heading"> Raffle <span>EXTRAVAGANZA</span> </div> Tips While not required, adding a gradient would enhance the overall look. ...

htmlcss

The latest approach to creating a layout with a full 100% height using HTML5 and CSS3

After taking a break from coding websites, I've realized that HTML5 and CSS have introduced a lot of new features. I typically design sites with a fixed size header and footer, with the main content area in between. The default page should take up 100 ...

csshtmllayout

Animate with jQuery to swap the positions of two floating divs

Hello, I recently made some updates to the code by adding 2 divs of different sizes. I am trying to achieve a switching animation using CSS floats for these divs. If you'd like to take a look at the current code, please visit - http://jsfiddle.net/jz ...

jqueryhtmlcssjquery-animatecss-float

Changing the CSS of ng-view when triggering CSS in ng-include: A step-by-step guide

Incorporating my left-hand, vertical navbar into the page using ng-include, I've managed to make it expand right on hover. Each page is enclosed within a <div class="wrapper">. My goal is to adjust the margin of each wrapper as the navbar expan ...

cssangularjscss-animations

Hyperlinks within an SVG do not function properly when the SVG is embedded in an image tag within a Bootstrap 5 Modal

Interestingly, the cursor remains unchanged even when hovered over the section with the hyperlink. Strangely, when I view the svg file separately in my browser, the links function properly. Here is the code snippet: <HTML> <div class="moda ...

csssvgbootstrap-modalbootstrap-5

Angular 2.0 in conjunction with D3.js does not style SVG elements using CSS

Currently, I am utilizing Angular 2.0 TypeScript along with the d3.js library to create graphics. My main focus is on applying CSS to the axis (especially shape-rendering: crispEdges;). Do you have any suggestions? Check out the code below: var vis = d3 ...

cssd3.jssvgangular

Angular ensures that the fixed display element matches the size of its neighboring sibling

I have a unique challenge where I want to fix a div to the bottom of the screen, but its width should always match the content it scrolls past. Visualize the scenario in this image: https://i.sstatic.net/i7eZT.png The issue arises when setting the div&apo ...

htmlcssangularjstypescript

What is the best way to place an "Add row" button directly in front of every horizontal row border within a table?

I would like to create an HTML table where I can insert rows by clicking on a centered "insert row" button placed between each pair of rows. This will help in visually indicating where the new row will be added. Is there a CSS solution to achieve this lay ...

css

Ensure that the page header remains in place at the top of the screen as

I'm interested in maintaining the highlighted components fixed at the top of the page to avoid overlapping with the text below during scrolling. Explore more ideas here Is there a specific code I can include in my "custom-msmbstyle.css" file to achi ...

htmlcss

When adjusting the size of the browser window, the div on my web page shifts to the bottom, creating a large empty space at

I have encountered an issue where, when I resize the browser window, my div moves to the bottom and leaves a large space at the top. I would like the div to remain in the center of the page, even if I resize the window to be smaller than the size of the ...

htmlcss

What are some ways to adjust red and green blocks using CSS?

One question that arises is how to create a version of a webpage where only the yellow block can slide up, while the red and green blocks remain fixed. Currently, the green block is treated with the following CSS: position:sticky; right:0px; top:100px; ...

javascripthtmljquerycssweb