This 'input' css seems to affecting all other web buttons

HTML & CSS
1

This seems to be affecting all other submit buttons on the site:

input[type="submit"] {      
background-color: #ffffff;
width: 200px;
height: 70px;
color: #850a00;
font-family: arial, helvetica, sans-serif;
text-align: center;
padding: 0px;
vertical-align:top;
font-size: 27px;
margin: 0px auto;
border:none;
outline:none;
}

input:focus,select:focus{
background:#;
border:none;
}

What do you suggest?

2

It will do, that selector selects all inputs with the type “submit”.

Apply a class to specific inputs you want styled that way and use that in your css selector.

2 Likes
3

Thanks for your reply.
Can you please give me an example of what your’re suggesting?

4

Just do the same as you would for a div and add a class when you want a certain div styled differently.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
input.my-input[type="submit"] {
	background-color: #ffffff;
	width: 200px;
	height: 70px;
	color: #850a00;
	font-family: arial, helvetica, sans-serif;
	text-align: center;
	padding: 0;
	vertical-align:top;
	font-size: 27px;
	margin: 0 auto;
	border:none;
	outline:none;
}
input.my-input:focus {
	background:#f00;
}
</style>
</head>

<body>
<form name="form1" method="post" action="">
  <input class="my-input" type="submit" name="submit" id="submit" value="Submit">
</form>
<p>testing</p>
<form name="form2" method="post" action="">
  <input class="not-my-input" type="submit" name="submit2" id="submit2" value="Submit 2">
</form>
</body>
</html>
5 Likes
5

Thanks for your reply.

I added this:

<input class="my-input1" type="submit" name="submit" id="submit" value="Submit">

and this:

input.my-input[type="submit"] {
	background-color: #ffffff;
	width: 200px;
	height: 70px;
	color: #850a00;
	font-family: arial, helvetica, sans-serif;
	text-align: center;
	padding: 0;
	vertical-align:top;
	font-size: 27px;
	margin: 0 auto;
	border:none;
	outline:none;
}
input.my-input:focus {
	background:#f00;
}

and I see this (see attached image).

Any additional help will be appreciated.

6

You misspelled your class name, it should be …

input class=“my-input”

without the “1”

7

Thank you for your reply. Sorry, that was a copy/paste error - to posting here.

I have this:

<input class="my-input" type="submit" name="submit" id="submit" value="Submit">

and this:


input.my-input[type="submit"] {
	background-color: #ffffff;
	width: 200px;
	height: 70px;
	color: #850a00;
	font-family: arial, helvetica, sans-serif;
	text-align: center;
	padding: 0;
	vertical-align:top;
	font-size: 27px;
	margin: 0 auto;
	border:none;
	outline:none;
}
input.my-input:focus {
	background:#f00;
}

and I see this:

I don’t understand why. Any help will be appreciated.

8

Not sure why that problem is happening but you should not name submit button - it can break functionality in some browsers - and you should never remove the outline as it then makes it impossible to navigate the page using the keyboard.

9

Well it looks like you copied everything from Paul’s working example, the only difference is that we can’t see the rest of your css and html.

Just as puzzled as you without the rest of your missing pieces.

Try making a stand alone demo with all your relevant css/html

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.