Experiencing problems with the CSS on the Login page and have yet to find a solution

Description:- I encountered an issue with my HTML login page where I used an image for the username and password. Everything worked fine when I manually typed in the username and password, but when I selected the username from the auto-fill suggestions popup, it caused the image I used for the username to disappear. This problem occurred while using Google Chrome browser version 42.0.2311.135. Can anyone help me figure out what went wrong?

HTML Code:-

<html>
<head>
<title>Login</title>  
</head>
<link href="style/style.css" rel ="stylesheet" type = "text/css" />
<body>





<div class="formpart">

        <div class="mainform">
        <h3><img src="images/edit.png" alt="" width="10px" height="10px" style="padding-right:5px">Admin Login</h3>

            <ul class="text">

                <label>Username</label>
                <li><input name="username" type="text" class="user"></li>
                <label>Password</label>
                <li><input name="password" type="password" class="paswrd"></li>
                <label></label>
                <li class="rembr"><input name="" type="checkbox" value="">Remember me</li>
</ul>
<ul class="list2">
                <li><input name="" type="submit" value="Log in"></li>
            </ul>
        </div>
</div>

</body>
</html>

Style-Sheet Code:-

/* CSS Document */

/* CSS Document */





    #main .formpart
    { 
    width:800px; 
     margin: 120px 0 0 500px;
        padding: 0;
        position: relative; 
    }
    .formpart h2
    { 
    margin:0px 0px 30px; 
    padding:0px; 
    padding-bottom:5px; 
    float:left; 
    font:normal 25px Arial, Helvetica, sans-serif; 
    color:#000000;
    width:800px;
    border-bottom:1px solid #1A446C; 

    }
    .formpart .mainform
    {
    width:535px;
    border:1px solid #ccc; 
    border-radius:5px; 
    background:#F9F9FB; 
    margin 0p 0px 0px 50px;
    float:left;
    }
    .formpart .mainform h3
    { 
    margin:0px; 
    padding:5px; 
    width:525px; 
    line-height:30px; 
    font:normal 13px Arial, Helvetica, sans-serif; 
    color:#3C3C3C; 
    float:left; 
    background:#F2F2F2; 
    border-radius:5px 5px 0px 0px;
    border-bottom:1px solid #ccc;
    }

    .formpart .mainform ul.text
    { 
    margin:70px 0px 0 50px; 
    padding:0px; 
    list-style:none; 
    width:500px;
    }

    .formpart .mainform ul.text li
    { 
    margin:0px; 
    padding:0px 0px 10px; 
    float:left; 
    width:300px; 
    font:bold 13px Arial, Helvetica, sans-serif; 
    line-height:25px;
    }
    .formpart .mainform ul.text li.rembr
    { 
    margin:0px 0px 20px 115px; 
    padding:0px 0px 10px; 
    float:left; 
    width:300px; 
    font:normal 12px Arial, Helvetica, sans-serif; 
    line-height:30px; 
    color:#6f6f6f;
    }
    .formpart .mainform ul.text label
    { 
    margin:0px; 
    padding:0px; 
    float:left; 
    font:bold 15px Calibri; 
    color:#000; 
    width:120px;
    }

    .formpart .mainform ul.text input
    { 
    margin:0px; 
    padding:0px 0px 0px 5px; 
    width:320px; 
    height:30px; 
    border:1px solid #ccc; 
    border-radius:5px;
    }
    .formpart .mainform ul.text input.user
    { 
    margin:0px; 
    padding:0px 0px 0px 30px; 
    float:left; 
    width:250px; 
    font:bold 13px Arial, Helvetica, sans-serif; 
    line-height:25px; 
    background:url(../images/user.png) no-repeat; 
    background-position:left;
    }
    .formpart .mainform ul.text input.paswrd
    { 
    margin:0px; 
    padding:0px 0px 0px 30px; 
    float:left; 
    width:250px; 
    font:bold 13px Arial, Helvetica, sans-serif; 
    line-height:25px; 
    background:url(../images/paswrd.png) no-repeat; 
    background-position:left;
    }

    .formpart .mainform ul.text input[type=checkbox]
    { 
    margin:0px; 
    padding:0px; 
    width:20px; 
    float:left;
    }
    .formpart .mainform ul.list2 li input[type=submit]
    { 
    margin:0px 0px 0px -112px; 
    padding:0px 10px; 
    width:60px; 
    background:#1A446C; 
    color:#fff; 
    font:normal 12px Arial, Helvetica, sans-serif; 
    line-height:25px; 
    border-radius:5px; 
    border:1px solid #000; 
    text-align:center;
    text-decoration:none;
    text-shadow:1px 0px 0px #d8d8d8;
    }

    .formpart .mainform ul.text li a.butn
    { 
    margin:0px 0px 0px 150px; 
    padding:4px 10px; 
    width:60px; 
    background:#1A446C; 
    color:#fff; 
    font:normal 12px Arial, Helvetica, sans-serif; 
    line-height:25px; 
    border-radius:5px; 
    border:1px solid #000; 
    text-align:center;
    text-decoration:none;
    text-shadow:1px 0px 0px #d8d8d8;
    }

    .formpart .mainform ul.list2, .formpart .mainform ul.list3
    { 
    margin:0px auto; 
    padding:0px; 
    list-style:none; 
    width:500px;
    }

    .formpart .mainform ul.list2 li, .formpart .mainform ul.list3 li
    { 
    margin:0px; 
    padding:0px 0px 10px; 
    float:left;
    font:bold 13px Arial, Helvetica, sans-serif; 
    line-height:25px;
    }
htmlcss

Answer №1

For a better experience, consider using a different browser. Chrome may automatically hide images in text boxes when filling out forms. To ensure the username is visible, manually type it in instead of relying on auto-fill.

input:-webkit-autofill {
    background-color: specify your color code !important;
    background-image: insert image url !important;
}

Answer №2

It appears that the issue is related to Chrome's autofill setting. Please refer to the following JS Fiddle for more information:

https://jsfiddle.net/zk755cr9/46/

I have included some dummy images in the text boxes and added a custom style:

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}

By implementing this style, I was able to remove the default color applied during auto fill selection.

Answer №3

It seems like the problem is related to the placement of the stylesheet link tag. You need to ensure it is within the head section of your HTML document. Here's how you can do it:

<head>
   <title>Login</title>
   <link href="style/style.css" rel ="stylesheet" type = "text/css" />  
</head>

I have tested this solution and it worked for me. For more information, you can check out this article: Does <STYLE> have to be in the <HEAD> of an HTML document?

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

retrieving embedded content from an iframe on Internet Explorer version 7

Need help with iframe content retrieval $('.theiframe').load(function(){ var content = $(this.contentDocument).find('pre').html(); } I'm facing an issue where the iframe content is retrieved properly in FF, Chrome, and IE 8,9 ...

javascriptjqueryhtmlinternet-exploreriframe

What is the best way to expand the subcategories within a list?

I have successfully implemented a script to open my hamburger menu. However, I am facing an issue with subitems as some list items contain them. How can I modify the script to ensure that the subitems expand when clicked instead of just hovering? functi ...

javascripthtmlcssmenu

Animating SVG elements using CSS

After learning how to use the <animate> attribute, I successfully created a captivating animation featuring an elastic line. However, I am now determined to transform this into CSS for better control: my goal is to activate the animation only upon ho ...

csssvg

Issue with Tailwind CSS table header alignment not properly aligning to the right

Currently, I am facing an issue with tailwindcss where the headers in my table are not following the text-right / text-left / text-center directives. If you want to see the problem yourself, here's a link to the fiddle: https://jsfiddle.net/3u2jgqoc/ ...

htmlcsstailwind-csstext-alignment

What is the best way to retrieve the current CSS width of a Vue component within a flexbox layout grid after it has been modified?

There's something about this Vue lifecycle that has me scratching my head. Let me simplify it as best I can. I've got a custom button component whose size is controlled by a flex grid container setup like this: <template> < ...

javascriptcssvuejs2flexboxvuetify.js

Is there a way to generate a hierarchical list menu using strings?

Within an HTML Application (HTA), I am utilizing vbscript to retrieve a list of subnet locations which is output as text in the following format: Chicago Denver Dallas Dallas/North Dallas/South Dallas/West Dallas/West/Building1 Dallas/West/Bu ...

javascriptjqueryhtmlvbscripthta

What methods are available to create a transition animation for an HTML 5 banner on iOS devices?

I need assistance with animating an HTML5 banner to transition vertically onto the screen in my app demo. After a prompt that triggers a server callback, the banner should smoothly move down from the top of the screen. The animation I am aiming for is simi ...

ioshtmlcsscss-transitionshtml5-animation

Implement a shadow effect on a customized image using Tailwind CSS

Can someone help me with this code snippet I have written: <script src="https://cdn.tailwindcss.com"></script> <div class="m-6 space-x-3"> <div v-for="m in media" class="w-[200px] h-[200px] inline-block"> <img class=" ...

csstailwind-css

Utilizing CSS and javascript to display position indicators on a map

I need help creating a basic webpage with the following functionality: The page will contain a map as a background image in a div, with clickable images placed on top (each within its own div). When these images are clicked, markers should appear or disap ...

htmlcssgoogle-maps

There is a lag in the loading of css stylesheets

We created a single-page company website that utilizes three different stylesheets connected to the index.html. By clicking a button, users can switch between these stylesheets resulting in changes to colors, images, and text colors. However, Issue 1: The ...

javascripthtmlcssdelayvisual-glitch

Is there a way to delete a table's row using JavaScript?

Hey there, total newbie to coding here. I'm working on a simple to do list project. The adding function is working great, and here's the code for it: let salvar = document.getElementById("salvar") let remove = document.getElementById("remove ...

javascripthtml

Issue with AngularJS URLs not functioning properly when using HTML5 mode

Utilizing the AngularJS SPA template in Visual Studio. In my app.js file, I have the following code: $stateProvider .state('touranalysis', { url: '/touranalysis', templateUrl: '/views/touranalysis/index', ...

htmlangularjs

Enhance your web design with the latest Bootstrap 5.2

I attempted to implement a tooltip using jquery in my jquery datatable, but unfortunately the tooltip is not appearing. Below is the code snippet: render: function (data, type, row, meta) { var total = row.success + row.error; if (row.isConsumed = ...

htmldatatablesbootstrap-5

CSS: Aligning content vertically centered

Take a look at the following example: <div class="container"> <div class="box1"></div> <div class="box2"></div> </div> The height of box1 is smaller than that of box2. Is there a way to vertically center box1 w ...

htmlcss

Anticipating the arrival of the requested data while utilizing Ajax sending

Greetings, I'm currently utilizing JavaScript to send a request and receive a response from the server. xxmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); myotherMethod(); I am looking for a way to ensure that the next set of instructions ar ...

javascriptjqueryhtmlajax

How to enlarge the size of specific letters in HTML

I am looking to enhance the values of C and I. In addition, I am utilizing ::first-text{}. This is currently functioning well. Now, the question arises - how can I elevate the value of I. <p>Creating and Implementing</p> <center> < ...

html

When the user clicks, the template data should be displayed on the current page

I need help with rendering data from a template on the same HTML page. I want to hide the data when the back button is clicked and show it when the view button is clicked. Here is my code: <h2>Saved Deals</h2> <p>This includes deals wh ...

javascripthtmlmeteormeteor-helper

Generate visual representations of data sorted by category using AngularJS components

I am facing an unusual issue with Highcharts and Angularjs 1.6 integration. I have implemented components to display graphs based on the chart type. Below is an example of the JSON data structure: "Widgets":[ { "Id":1, "description":"Tes ...

javascripthtmlangularjsjsonhighcharts

Update the DIV element's class to reflect whether the quiz answer provided is correct or incorrect

I am facing a challenge while attempting to assign a CSS class to a dynamically created element in JavaScript. The error I'm encountering pertains to the reference issue with the trackerMarker element within the event listener functionality. Although ...

javascripthtml

What is the best way to create a table row when there is no data available?

<?php include "db.php"; if ($_SERVER["REQUEST_METHOD"] == "POST") { $search_date = $_POST['search']; } $show_result = mysqli_query($con, "SELECT * FROM data_input where input_date = '$search_date' "); ...

phphtmlmysqlmysqli