CODEWITHSUNDEEP
css
Shrey
Shrey

Reputation: 532

CSS – Form button isn't responding to styling

I have tried styling my form submit button, but it isn't responding to any CSS styling. I tried using its class individually and also id individually and even both the class and id together, but nothing is working. I've attached the code:

HTML/PHP 

if ($_POST['submit']) {
  $member_username = "username";
  $member_password = "pass****";

  $username = $_POST['username'];
  $password = $_POST['password'];

  if ($username == $member_username  && $password == $member_password) {
    $_SESSION['username'] = $username;
    header('Location: secret.php');
  } else {
    echo 'Incorrect username or password';
  }
}
?>

<!DOCTYPE html>
<html>
<head>
  <link href="style.css" rel=stylesheet />
  <link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
  <title>Topaz</title>
</head>
<body>
  <div class="index">
    <div class="indexcontainer">
      <h1>Topaz</h1>
      <div class="indexform">
        <form action="index.php" method="POST">
          <input class="textbox" type="text" name="username" placeholder="Username" /><br /><br /><br />
          <input class="textbox" type="password" name="password" placeholder="Password" /><br /><br /><br />
          <input class="submit" id="submit" type="submit" name="submit" value="Login" />
        </form>
      </div>
    </div>
  </div>
</body>
</html>

CSS

.submit {
  width: 200px;
}

#submit {
  width: 200px;
}

Upvotes: 0

Views: 88

Answers (2)

Daniel Brose
Daniel Brose

Reputation: 1403

Its probably just relative pathing to the style sheet, hit F12 (for chrome, though may need to enable dev console, google if needed) and see whether the network panel or console panel show a 404 error for one or more files.

The actual css applies fine

<!DOCTYPE html>
<html>

<head>
  <!--
  <link href="style.css" rel="stylesheet" />
  -->
  <style>
    .submit{width:200px; color:red;}
  </style>
  <link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
  <title>Topaz</title>
</head>

<body>
  <div class="index">
    <div class="indexcontainer">
      <h1>Topaz</h1>
      <div class="indexform">
        <form action="index.php" method="POST">
          <input class="textbox" type="text" name="username" placeholder="Username" />
          <br />
          <br />
          <br />
          <input class="textbox" type="password" name="password" placeholder="Password" />
          <br />
          <br />
          <br />
          <input class="submit" id="submit" type="submit" name="submit" value="Login" />
        </form>
      </div>
    </div>
  </div>
</body>

</html>

Ensure that "style.css" is on the same level as the php or html file that is actually being hit, or use relative pathing.

Also its good form to validate your html and css, as unrelated syntax mistakes can break styling.

For html: https://validator.w3.org/

For css: https://jigsaw.w3.org/css-validator/

But these likely wont be able to pickup on pathing issues, just syntax, so ensure you use the developer console for whatever browser your using.

Upvotes: 2

jason lu
jason lu

Reputation: 56

You can try to add an inline style to have precedent over the external style sheet. Just use the tag and then put in the in the head tag area.

<style>
  .submit {
    width: 200px;
  }
  #submit {
    width: 200px;
  }
</style>

Upvotes: 0

Related Questions