0

I do not have any inline styling. I am sorry for any inconvenience as I am a self-learner and this is my first question.

Many thanks for your support.

#submit {
  background-color: yellow;
  font-weight: bold;
  font-size: 15px;
  border-width: medium;
}

#submit a:hover {
  background-color: red;
}
<form id="form">
  <label for="email" id="email-label"></label><br>
  <input id="email" type="email" required name="Form-elements" placeholder="Enter your Email Address" /><br><br>
  <a href="https://www.freecodecamp.org/email-submit">
    <input type="submit" id="submit" value="Get Started"></a>
Alexander Nied
  • 12,804
  • 4
  • 25
  • 45
React_ing
  • 3
  • 2
  • Welcome to Stack Overflow. Can you please add the HTML you are working with? it will make it easier to diagnose your issue. Thank you! – KJEK-Code Feb 10 '22 at 21:05
  • 1
    Welcome to SO! I recommend all new users visit [ask] for tips on how to write a post that best enables the community to provide you with assistance. Please note that including a [mcve] will provide necessary context for your issue to be understood. Additionally, it is helpful to include the steps to reproduce the problem, the expected output/result, and the _actual_ output/result, and how they differ. Good luck, and happy coding! – Alexander Nied Feb 10 '22 at 21:08

2 Answers2

1

There are a few problems here:

  1. You have put an <input> inside of an anchor (<a>). Please note that interactive elements are not permitted children of the anchor element. You can imagine the issues if it were-- how would the browser determine which element you intended to interact with-- the anchor, or the button it contains? If you want an anchor that looks like a button, you can simply use CSS to style it appropriately. Malformed HTML can lead to strange, difficult to debug issues, so I suggest you resolve this.
  2. Even with the malformed HTML, your styles are not written quite correctly to match as you have set here. You have a <a> that contains an <input>, but the selector #submit a:hover reads as "target a hovered <a> that is inside of an element with id #submit". So the rule is inverted from the actual case. You could rewrite this a number of ways to make it match; here's one:

#submit {
  background-color: yellow;
  font-weight: bold;
  font-size: 15px;
  border-width: medium;
}

a:hover #submit {
  background-color: red;
}
<form id="form">
  <label for="email" id="email-label"></label><br>
  <input id="email" type="email" required name="Form-elements" placeholder="Enter your Email Address" /><br><br>
  <a href="https://www.freecodecamp.org/email-submit">
    <input type="submit" id="submit" value="Get Started"></a>

...however, I would recommend that you don't go with this solution alone, but instead clean up your HTML and start from a solid foundation.

Alexander Nied
  • 12,804
  • 4
  • 25
  • 45
  • Tysm for your very detailed answer. "User Story #12: When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit)." How would I make sure that my submit button takes me to another page without using it inside the anchor tag? – React_ing Feb 10 '22 at 21:34
  • @React_ing - You are very welcome :) To some degree this depends on the technology being used. But for a simple solution for a framework-free site [there is a SO post that addresses how you could accomplish this](https://stackoverflow.com/q/44221250/6831341). – Alexander Nied Feb 10 '22 at 21:47
0

I think this should be it..

#submit {
  background-color: yellow;
  font-weight: bold;
  font-size: 15px;
  border-width: medium;
}

#submit:hover {
  background-color: red;
}
<form id="form" action="https://www.freecodecamp.org/email-submit">
  <label for="email" id="email-label"></label><br>
  <input id="email" type="email" required name="Form-elements" placeholder="Enter your Email Address" /><br><br>
  <input type="submit" id="submit" value="Get Started">
</form>
Ashish Bhattarai
  • 130
  • 9