Assessment wanted for Images and Forms skill test 2

Hi there. I am trying to to the “Test your Skills” regarding form elements in CSS. Unfortunately I do not know why padding does not work / only work if I add a background-color element. Can someone explain? Here ist the code:

CSS:

.myform {
  border: 2px solid #000;
  padding: 5px;
}

input[type="search"], input[type="submit"]
{
font-size:inherit;
padding: 10px;
}

input[type="submit"]
{
background-color: purple; /* if I remove this rule, padding won't apply */
color: white;
border-style: none;
border-radius: 5px;
}

HTML:

<form method="post" action="" class="myform">
  <div><label for="fldSearch">Keywords</label>
  <input type="search" id="fldSearch" name="keywords">
  <input type="submit" name="btnSubmit" value="Search"></div>
</form>

Hi there @Ryan_Lin_Xiang. Which test your skills page are you currently working on? I don’t recall writing one featuring forms, so maybe this is one of Rachel’s ones.

I can tell you that form elements can be really annoying to style. In some browsers like Firefox the padding works ok, but in others, like Chrome it doesn’t. The reason for this is that a lot of browsers use the operating system’s underlying styles to style their form elements, but this means that a lot of CSS won’t work by default.

To turn off the operating system level styling of form elements, you can use the property -webkit-appearance: none;.

For a lot more information about form styling and how annoying it can be, see: