Why when adding background-color to form button it is losing its 3D look?

HTML & CSS
1 
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    background-color: yellow;
}
</style>
</head>
<body>

<form name="input" action="" method="get">
  Firstname:<input type="text" name="Name" value="venkat" size="20">
  Lastname:<input type="text" name="Name" value="chowdary" size="20">
  <input type="button" value="Button">
</form>

</body>
</html>
1 Like
2

What do you expect the form to do?

5

Your button is functioning just fine but you haven’t told it what to do once the button has been clicked.

This site explains the process. A little bit of PHP is needed.
https://www.w3schools.com/php/php_forms.asp

1 Like
6

I think the form perhaps could also need a “Submit” button. :wink:

<input type="submit" value="Submit">
7

< offtopic >

Too many people make the profound mistake of
believing that W3Schools is actually associated
with and therefore recommended by the…

The World Wide Web Consortium (W3C).

Nothing could be further from the truth!

Further reading:-

why w3schools is bad

For a more professional approach to learning,
you really should check out these links…

  1. Web technology for developers
  2. Learning HTML: Guides and tutorials
  3. Learn to style HTML using CSS

< /offtopic >

coothead

2 Likes
8

Hi,

At first I didn’t realize your actual question. :slight_smile:

The question is about the button’s appearance;
Why it is losing its appearance as a button when a background is set?

Good question! :+1:
I think I need to come up with some more sources to explain this. :slight_smile:

A long time SPF member @tyssen wrote about styling buttons 10 years ago. Also mentioned the added background changed the button’s default look:

Sorry for my pathetic answer before. :wink:

2 Likes
9

Hi there penubothuvenkannacho

I have corrected and validated your code
and given it a hint of yellow…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }

body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

input[type=text] {
    display: block;
    width: 11.2em;
    padding: 0.22em 0;
    margin: 0.25em 0 0.69em;
    border: 1px solid #888;
    border-radius: 0.25em;
    background-image: linear-gradient( to bottom, #ff0, #dd0);
    text-indent: 0.5em;
 }

input[type=submit] {
    width: 9.5em;
    padding: 0.22em 0;
    margin-left: 1.7em;
    background-image: linear-gradient( to bottom, #ff0, #dd0);
    border: 1px solid #888;
    border-radius: 0.25em;
    box-shadow: inset 0 0 1px #fff;
 }

input[type=submit]:focus,
input[type=submit]:hover,
input[type=submit]:active {
    background-image: linear-gradient( to bottom, #e4f4fc, #acdcfc);
    border: 1px solid #3c7fb1;
    text-indent: 2px;
 }
</style>
</head>

<body>

<form action="#" method="get">

  <label for="fname">Firstname:</label>
  <input type="text" id="fname" name="FName" placeholder="venkat" value="" required>

  <label for="sname">Lastname:</label>
  <input type="text" id="sname" name="LName" placeholder="chowdary" value="" required>

  <input type="submit" value="Button">

</form>

</body>
</html>

coothead

3 Likes
10

I really can’t explain why the input element loses its appearance when a background property is declared, overriding the browser’s default look.

I could guess, but that’s not a good answer. :slight_smile:

Some info about the CSS “appearance” property you might find useful:

@coothead posted a nice remedy though. Well done! :+1:

2 Likes
11

Take a look at this when we define input[type=“button”] two times its changing its background-color but its hover effect still remains this should happen right but the button actually losing its total background-color functionality.

<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
    
    background-color: gold;
    border: 3px solid black;
}

input[type="button"]:hover {
    background-color: orange;
     
}

input[type="button"]:active {
    background-color: green;
     
}
input[type="button"] {
    background-color: blue;
    border: 3px solid black;
}

</style>
</head>
<body>

<form name="input" action="" method="get">
  Firstname:<input type="text" name="Name" value="Peter" size="20">
  Lastname:<input type="text" name="Name" value="Griffin" size="20">
  <input type="button" value="Example Button">
</form>

</body>
</html>
12

I’m not quite sure what you are getting at there as your code does produce the hover and active states as directed?

If you mean that you have to style the hover and active states once you have changed the background of the normal button state they yes that’s true because once you alter the background (or a border) on the button then all the UA (user agent) default styling is lost and cannot easily be re-instated.

This CSS tricks article explains some of the details.

All in all form elements are better off (largely) left alone if you want them to work cross browser in any sensible way.:slight_smile:

3 Likes
13

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