Thin grey text input border

[Paul-D]

Hi. I had this website section running for years. Recently chrome has changed it's defaults giving my text inputs a harsh black border. IE firefox etc do not do this. I have had a play with the and cant get grey borders with rounded edges.

desmond-otoole.co.uk/bank

 

<div><br><br>&nbsp;User name:<br></div>
<div><span style="border-radius: 10px;border: 2px solid grey;"><input type="input" name="<?=$UserName?>" size="25" maxlength="20" value="Desmond"></span>&nbsp;<span style="color:red"><? echo $_SESSION["Error_1"]?></span></div>

 

Any help on this. It is annoying when browsers mess around with defaults.

 

[kicken]

Apply your styles to the <input> tag rather than a <span> tag.

[Paul-D]

This is still not working. I have put everything in a style sheet where it should be but this isn't working either

 

input[type="input"], input[type="password"], input[type="text"], textarea 
{
	background-color:#ffffff;
	font:Bold;
	color:#000000;
	border-width: thin;
	border-radius: 20px;
	border-color:green;
}

input[type="input"]:focus, input[type="password"]:focus, input[type="text"]:focus, textarea:focus 
{
    background-color:#f4cd81;
	font:Bold;
    color:Blue;
	border-width: thick;
	border-radius: 20px;
	border-color:green;
}

 

[maxxd]

Are you actually using a font named Bold? The rest of the CSS should be working, so make sure it's being included into the HTML - can the calling page actually find it? Add

body{
	background-color: red;
}

to your CSS sheet.

[jodunno]

so try to change the default style: border: none; outline: none; then specify a solid 2px gray border.

input[type="password"], input[type="text"], textarea 
{
	background-color:#ffffff;
	font-weight:bold;
	color:#000000;
        border: none; outline: none;
        border: solid 2px gray;
	border-width: thin;
	border-radius: 20px;
	border-color:green;
}

input[type="input"]:focus, input[type="password"]:focus, input[type="text"]:focus, textarea:focus 
{
    background-color:#f4cd81;
	font-weight:bold;
    color:Blue;
	border-width: thick;
	border-radius: 20px;
	border-color:green;
}

meantime, input type="input"? please review input types.

let us know how it goes...

[Paul-D]

This is driving me nuts now. I have viewed this web page in Chrome 83, IE8, FF78 and Opera (unknown) I get different view in chrome. The browsers don't follow the style sheet settings.

 

I want a very thin barley visible border maybe light grey even. Nice if the input boxes have rounded sides. Seems they only become rounded when they have the focus. Again not following the style sheet settings.

input[type="input"], input[type="password"], input[type="text"], textarea 
{
	background-color:#ffffff;
	font:Bold;
	color:#000000;
	border-width: thin;
	border-radius: 20px;
	border-color:green;
}

input[type="input"]:focus, input[type="password"]:focus, input[type="text"]:focus, textarea:focus 
{
    background-color:#f4cd81;
	font:Bold;
    color:Blue;
	border-width: thick;
	border-radius: 20px;
	border-color:green;
}

 

[kicken]

The page displays thin rounded borders for me in chrome and firefox.  Make sure your not having cache issues.