Avatar of Gordon Saxby
Gordon SaxbyFlag for United Kingdom of Great Britain and Northern Ireland asked on

submit button has lost standard appearance

I am developing a web site and making use of CSS to style and position DIVs, etc. The standard HTML buttons (input type="button", input type="submit", etc) have lost their "standard" look and hover action. They have taken on a background colour that does not appear to be in the stylesheet and there is no change when the mouse hovers over.

I have removed the only mention of "input" from the css file but it hasn't helped. Obviously, I know it's difficult to diagnose without seeing the entire CSS and HTML but that's a bit tricky right now. So, assuming that the stylesheet does not mention "form" or "input", what else would affect these buttons?
CSS

Avatar of undefined
Last Comment
Gordon Saxby

8/22/2022 - Mon
glcummins

Is there a class or ID associated with the submit button? Something in the form of:

 <input type="submit" class="theClass"...

or

  <input type="submit" id="theId"...
MMDeveloper

have you written a css selector that applies to 'input' ?

input {
something: value;
}
glcummins

As you know, there are three different places that CSS rules can be applied:

 1. In a global CSS file included via a
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
ASKER
Gordon Saxby

I have tried a plain button immediately before the end of the body, but it still has changed. I have commented out any "input" entries in the stylesheet but the button still changes.

This is going to be something really obvious and silly, isn't it!!
<input type="submit" name="Submit" value="CHECKOUT">

Open in new window

glcummins

Can you post the entire head of your document here?

Alternately, can you examine all Javascript that is being run, and see if the styling of the button is being changed at runtime? (An easy way to check this is to disable Javascript in your browser, and then reload the page.)
ASKER
Gordon Saxby

Ah, found it, the snippet below is at the top of the layout stylesheet. I removed it and the button appearance returned.

It hasn't had a major effect on the overall layout but it has had some. Will I need to set these 3 items everywhere, or can I reinstate this and do something else to maintain the button appearance?
* { 
	padding: 0; 
	margin: 0; 
	border: 0; 
}

Open in new window

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
glcummins

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
Gordon Saxby

glcummins - changing * ( to html, body { has done the trick! I have had to make some changes to a few classes to regain the correct layout but now the buttons all look like buttons should!