css not function on input submit in php/html-CodePudding

I have a form and the input submit I cant styling. I want that the button looks like a text and with hover change background and font colour. Any solving?

input[type="submit"] {
  font-family: made, mirage;
  text-decoration: none;
  background-color: none;
  background-color: #383e42;
}

input[type="submit"]:hover {
  background-color: white;
  cursor: pointer;
}

<form action="" method="post">
  <input type="text" name="yourmail" placeholder="Váš e-mail:">
  <input type="text" name="subject" placeholder="Předmet:">
  <textarea name="message" placeholder="Text správy" rows="10"></textarea>
  <input type="submit" name="send-mail" id="" value="Odeslat" />
</form>

CodePudding user response：

You need to wrap your CSS styles in a <style></style> element.

<form>
<input type="text" name="yourmail" placeholder="Váš e-mail:">
                        <input type="text" name="subject" placeholder="Předmet:">
                        <textarea name="message" placeholder="Text správy" rows="10"></textarea>
                        <input type="submit" name="send-mail" id="" value="Odeslat"/>
                    </form>
<style>
    input[type="submit"] {
        font-family: made, mirage;
        text-decoration: none;
        background-color: none;
        background-color: #383e42;
    }

    input[type="submit"]:hover{
        background-color: white;
        cursor: pointer;
    }
</style>

CodePudding user response：

To make the button look like normal text:

Set background-color to unset
Set border-style to none

Then, on hover, simply change background and text color.

input[type="submit"] {
  border-style: none;
  font-family: made, mirage;
  text-decoration: none;
  color: black;
  background-color: unset;
}

input[type="submit"]:hover {
  background-color: white;
  cursor: pointer;
  color: white;
  background-color: #383e42;
}

<form action="" method="post">
  <input type="text" name="yourmail" placeholder="Váš e-mail:">
  <input type="text" name="subject" placeholder="Předmet:">
  <textarea name="message" placeholder="Text správy" rows="10"></textarea>
  <input type="submit" name="send-mail" id="" value="Odeslat" />
</form>