Having issue with css in Login page(still didn't get any solution)

Question

Description:- I had a html login page where I use image for username and password when I type username and password in text box every thing is fine,but when I pick username from popup(auto-fill suggestions) then it hide the image which I had use for username.I am using Google chrome browser version 42.0.2311.135.Any one can figure it 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;
    }

possible duplicate of [Override browser form-filling and input highlighting with HTML/CSS](http://stackoverflow.com/questions/2338102/override-browser-form-filling-and-input-highlighting-with-html-css) — Shaggy, May 12 '15 at 12:16

Karthik N · Answer 1 · 2015-05-12T12:22:45.587

0

Try with other browser. Because, chrome having the default fill option to hide image in the text box. Otherwise type to fill the username instead of auto fill.

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

edited May 12 '15 at 12:22

answered May 12 '15 at 12:15

Karthik N

515
2
9
22

score 0 · Answer 2 · answered May 12 '15 at 12:43

0

This seems to be the issue with chrome autofill setting. Just look into the js fiddle given below

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

added some dummy images.To the text boxes.I added the style

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

and i am able to remove the color which is getting while we select auto fill.

answered May 12 '15 at 12:43

Joseph

1,054
1
11
25

yes it remove the yellow colour in text box while auto-fill but still problem persist that it also remove the image.So is there any way that it wont remove image . – Akshat Dhiman May 12 '15 at 12:54
I think it is very inconvenient practice to use background images for text boxes.What you could try means just put a background and try using transparent text box. – Joseph May 12 '15 at 13:38

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

The issue seems to related to stylesheet link tag. You haven't placed it inside head tag. Put the link tag inside head. Like this.

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

I tested it and it works in my case. Read this Does <STYLE> have to be in the <HEAD> of an HTML document?

edited May 23 '17 at 11:43

Community

1
1

answered May 12 '15 at 13:23

Pankaj

1,731
1
13
15

Hi i had check this thing also but didn't seems to working .I also specifies that it wont work in chrome browser. – Akshat Dhiman May 12 '15 at 13:39
Have you checked it in other browsers? – Pankaj May 12 '15 at 13:43
yeah I had check its working fine in Mozilla Firefox but not in chrome that's the problem. – Akshat Dhiman May 12 '15 at 13:49

Having issue with css in Login page(still didn't get any solution)

3 Answers3