你好!
我有一个表单,我想使用 CSS 选择器来调整除输入类型提交之外的所有输入的大小。
我想应用这样的东西:
#section3 div input:not(input[type="submit"]) {
width: 350px;
}
但这对我不起作用..有人可以告诉我包含该选择器的正确方法吗?
选择者:
#section3 div input {
width: 350px;
}
是的,它改变了输入的大小,但它也使用输入类型提交。我知道我以后可以调整输入类型提交的大小......但我想用一个选择器应用它,而不是做和撤消样式。
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Título de la página</title>
<link href="estilos.css" rel="stylesheet">
</head>
<style>
* {
margin: 0px;
font-family: arial;
}
#section2,
#section3 {
text-align: center;
}
#section3 div {
display: inline-block;
vertical-align: top;
width: 600px;
height: 450px;
}
#section3 div form {
text-align: left;
}
#section3 div form label {
display: inline-block;
width: 150px;
margin-right: 1em;
vertical-align: top;
}
#section3 div input:not(input[type="submit"]) {
width: 350px;
}
#section3 div form textarea {
width: 350px;
height: 200px;
}
</style>
<body>
<div class="contenedor">
<!-- SECCION 3 -->
<section id="section3">
<h2>Sección 3</h2>
<div>
<form name="Contacto" method="post" action="#">
<label for="nombre">Nombre y Apellidos</label>
<input type="text" name="nombre" id="nombre" required><br>
<label for="correo">Correo electrónico</label>
<input type="email" name="email" id="correo" required><br>
<label for="tel">Teléfono</label>
<input type="tel" name="tel" id="tel" pattern="[0-9]{9}"><br><br>
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" placeholder="Escriba aquí su mensaje" required></textarea><br><br>
<input type="submit" value="Enviar"><br>
</form>
</div>
</section>
</div>
</body>
</html>
谢谢 :)
<input>
您的方法非常成功,您需要排除not()
.在这些情况下,最简单的事情是您通过类和 id 管理选择,考虑:
texto-ingresado
,这样只有那些具有上述属性的输入才会受到声明的 CSS 的影响submit
我们可以给类型输入一个 idenvio
考虑到它是一个功能与已经提到的其他元素完全不同的元素,我们可以在表单中唯一地标识它因此,例如,如果您像这样保留 HTML:
所以你的选择规则可以这样组成:
有几个选项可以解决这个问题: 您可以根据要修改的输入的属性使用选择器:
您可以使用其他答案所说的课程等等。我建议您阅读此文档,因为它可以为您提供很多帮助。
文档:
伪 CSS 选择器
每个属性的 CSS 选择器