He intentado estilizar el botón de envío de formulario, pero no responde a ningún estilo CSS. Intenté usar su class individualmente y también id individualmente e incluso ambos class y id Juntos, pero nada está funcionando. He adjuntado el código:
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;
}
Respuestas
2 para la respuesta № 1Es probable que sea solo un parche al estilo.hoja, presione F12 (para Chrome, aunque es posible que deba habilitar la consola dev, google si es necesario) y ver si el panel de la red o el panel de la consola muestran un error 404 para uno o más archivos.
El css real se aplica bien
<!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>Asegúrese de que "style.css" esté en el mismo nivel que el archivo php o html al que realmente se está atacando, o use la aplicación de rutas relativas.
También es una buena forma de validar tu html y css, ya que los errores de sintaxis no relacionados pueden romper el estilo.
Para html: https://validator.w3.org/
Para css: https://jigsaw.w3.org/css-validator/
Pero es probable que estos no sean capaces de detectar problemas de rutas, solo la sintaxis, así que asegúrese de usar la consola del desarrollador para cualquier navegador que esté usando.
0 para la respuesta № 2
Puede intentar agregar un estilo en línea para tener un precedente sobre la hoja de estilos externa. Solo use la etiqueta y luego colóquela en el área de etiqueta de la cabeza.
<style>
.submit {
width: 200px;
}
#submit {
width: 200px;
}
</style>