Question

我尝试过设置表单提交按钮，但它没有响应任何CSS样式。我尝试单独使用class，单独使用id，甚至同时使用class和id，但没有任何效果。我附上了代码：

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;
}

Answer 1

它可能只是相对于样式表的路径，点击F12（对于chrome，但可能需要启用开发控制台，谷歌，如果需要），并查看网络面板或控制台面板是否显示一个或多个文件的404错误。

实际的css适用

＆＃13;

<!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>

＆＃13;

确保＆＃34; style.css＆＃34;与实际被击中的php或html文件处于同一级别，或使用相对路径。

它也是验证你的html和css的好形式，因为不相关的语法错误可能会破坏样式。

对于html：https://validator.w3.org/

对于css：https://jigsaw.w3.org/css-validator/

但是这些可能无法解决路径问题，只是语法，所以请确保您使用开发者控制台来使用您使用的任何浏览器。

Answer 2

您可以尝试添加内联样式以在外部样式表上具有先例。只需使用标签，然后将其放入头标签区域。

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

CSS - 表单按钮没有响应样式

2 个答案: