如何对表单进行风格化以使其真正变大[关闭]

Posted 2023-02-22

【中文标题】如何对表单进行风格化以使其真正变大[关闭]

【英文标题】：How to stylize a form to make it REALLY FREAKING BIG [closed]

【发布时间】：2014-10-03 17:27:06

【问题描述】：

我想让表单上输入字段和按钮的默认大小比正常大小大 3 倍，并且输入字段中显示的文本比默认大小大 3 倍。

我以前见过这样做，但如果我能找到任何代码让我开始，我会被诅咒的。

【问题讨论】：

getthiscrazyoffer.com/hiringnational 表单显示在此页面的底部。我希望它又好又大，以便人们注意到它。

developer.mozilla.org/en-US/docs/Web/Guide/html/Forms/…

是的，我已经看到那个页面了，帮助不大

【参考方案1】：

要使输入字段和按钮更大，您需要使用 CSS 选择器来执行此操作，我将给您一个基本表单的快速示例：

HTML：

<form ID="Form" action="Contact.php" method="post">
     <!-- Standard input text boxes -->
     <input type="Text" name="FirstName" placeholder="First Name">
     <input type="Text" name="Surname" placeholder="Surname">

     <!-- Submit button -->
     <input type="submit" value="Submit" name="Submit">
</form>

CSS：

input[name=FirstName] 
    font-family: Arial;
    font-size: 16px;
    width: 300px;
    height: 150px;
    font-weight: bold;


input[name=Surname] 
    font-family: Arial;
    font-size: 16px;
    width: 300px;
    height: 150px;
    font-weight: bold;


input[type=submit] 
    width: 300px;
    height: 300px;
    font-family: Arial;
    font-size: 16px;
    background: #DF0101; /* red */
    box-shadow: #6E7849 1px 1px 10px;
    color: white;

这是我刚刚完成的一个 jsfiddle.net 示例，然后可以修改所有宽度和高度等以适合您在 CSS 样式表中的偏好。

http://jsfiddle.net/tduagdnt/