"Creatively incorporating icons into textboxes using HTML and CSS

I'm currently working on a registration form that requires users to input their username, first name, last name, and more.

Experimenting with CSS, I wanted to enhance the textboxes by adding icons to them. Unfortunately, my attempts have not been successful so far.

Here is the HTML code snippet for one of the textboxes:

<input id ="regtxt" type="text" placeholder="Username" name = "user" maxlength="9"/>

And here is the corresponding CSS code:

#regtxt{
background-image:url('images/usericon.png');
left:no-repeat;
}

Can anyone spot what I might be doing incorrectly?

Thanks in advance!

Answer №1

Absolutely! left and no-repeat are essential components of the background property. Give this a shot:

#regtxt{
   background-image:url('images/usericon.png') left center no-repeat;
}

Double-check that the image/file path is accurate and that there are no conflicting css rules.

Update: Experiment with an inline image:

#regtxt{
  background:url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) right center no-repeat;
}

Check out the demo here: http://codepen.io/anon/pen/dPgpKv

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

Guiding users who have disabled JavaScript through redirection

When faced with the following markup, users whose browser has JavaScript disabled will be redirected to an alternative page. This alternate page may attempt to mimic the site's functionality without JavaScript or simply display a warning message infor ...

Customer uploaded an image to the WordPress header but it is not aligning correctly

Trying to align an image added by my client in the WordPress header. As someone who is still learning CSS, I'm struggling to get it exactly where we want it. Visit the site here The Options House graphic currently sits on the right. My goal is to ha ...

ERB causing CSS to not display properly

Recently, I successfully hosted an application on Heroku and it was working perfectly fine with the CSS being linked like this: <link rel="stylesheet" href="/css/style.css"/> However, when I added my custom domain, the CSS stopped working. ...

Error Message: "Duplicate variable declaration detected"

This piece of code is causing me some major headaches. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#" data-source="ryedai">Ryedai</a> <a href=&q ...

A method for merging the values of three text fields and submitting them to a hidden text field

<label class="textRight label95 select205">Cost Center: </label> <input type="hidden" name="label_0" value="Cost Center" /> <input type="text" name="value_0" class="input64 inputTxtGray" value="" maxlength="10" /> <input type=" ...

Is it possible to consolidate all CSS code into a single Style?

Recently diving into the world of HTML, I find myself tackling CSS tasks to enhance the look of my website. It's been interesting experimenting with different styles for each CSS code snippet. Each paragraph with a unique ID is getting its own special ...

Dynamic arrangement of a dual-column table design that avoids aligning tables in parallel

Apologies for my novice coding skills as it's a mishmash of various email layouts, but I'm struggling to figure out why my table layout is not showing the columned tables side-by-side. The issue seems to be with the two td elements having the cl ...

What is the best way to display the current page within a frame in HTML?

Having some trouble creating a frame on my web page. Utilizing the <IFRAME> tag to create it. My file is named Testing.html. Here's an example: <IFRAME src="Sample.html" style="width:800px; height: 250px; float:right; border:none"></I ...

Enhance user experience with dynamic color changes in JavaScript

Looking to create a navigation menu with unique colors for each selected state? Check out the code below! After searching extensively, I stumbled upon this snippet. While it only includes one selected state, you can easily customize it for three different ...

The sidebar on the right side of the screen is content to relax beneath my

The positioning of my sidebar is currently below the content on the left side of the page, but I want it to sit beside the content on the right side. I've tried various solutions from similar questions without success. Here is an example of how I woul ...

Adding a continuous background video to a website with HTML/CSS

I've been struggling to set a video as the background of my website. Despite researching extensively, I can't seem to get it to work and I'm not sure where I'm going wrong. In my HTML code, this is what I have: <video id="bgVideo" ...

Is it permissible to utilize the submit button in order to trigger an AJAX function?

I have a dilemma with my HTML form. Currently, it submits data directly to a PHP file. I am interested in updating the code so that when the submit button is clicked, the data is sent to a JavaScript function instead, allowing me to incorporate an AJAX f ...

What is the process of utilizing a <li> for a hover selector in jquery?

I've encountered an issue with a list that I am trying to modify its content when hovering over them. Despite using the id as a selector for triggering the hover function, all list items change color instead of just the intended one. The challenge lie ...

Applying the CSS `capitalize` property does not have any impact in an HTTP POST

After applying the css property text-transform:capitalize;, I observed that it does not retain the capitalized value when sending the input through an http-post to another page. What could be the reason for this behavior? Is there a solution to preserv ...

Using jQuery to set data and display it in a select element on an HTML page

I have a dropdown menu to select the year. The year needs to be dynamically set using jQuery AJAX code as shown below. (This data is retrieved from the database and appears as 2015). If the jQuery value is null, the current year should be displayed. My ...

Having trouble getting the CSS Transform property to be affected by ScrollTop

Hello everyone, I am attempting to create a ball that has a 50% radius and rolls left based on the user's scroll movements. So far, I have successfully made it move left in relation to ScrollTop, but unfortunately, I cannot get the transform property ...

How can I ensure that my HTML form inputs are consistently displayed in the browser when using jQuery/AJAX and SQL queries without needing to

My goal is to show all textarea inputs in the browser even after a page refresh, as currently when I send data from homepage.php using jQuery/AJAX, it disappears upon refresh. The information is sent from homepage.php to data.php via the #textarea input an ...

Creating visually appealing transition effects like sliding in an autocomplete feature can enhance the user experience and

I have successfully implemented autocomplete functionality, but now I am looking to add a transition effect (slide down) to the suggested menu. After researching online, I found a helpful tutorial on this topic: Based on the information I gathered, I tri ...

When the height is set to 100vh, the Div and Image appear misaligned vertically

Could someone explain why there is a vertical separation between the div and the image? <div style="height: 100vh; display: inline-block;width: 50%; background-color: blue">TEST </div><!-- --><img src="photos/openening.jpg" alt="SICK ...

Issue with Hover Effect on Safari Browser

Encountering a peculiar issue exclusively in Safari - when hovering over a link in the header, the links to the right of the hovered-over link alter their size (appearing smaller) during the hover animation. Once the animation concludes, these links revert ...