Javascript 向窗体添加样式

Javascript 向窗体添加样式,javascript,html,css,Javascript,Html,Css,我有一个用html创建的表单,但是使用js并从数据库中提取数据。我想设计它,但我不知道怎么做。我有来自下面的和一些css,我如何将两者结合起来 <form id="database" name="database"> <label>School</label> <select id="schoolList" name="schoolList" onchange="schoolChange()">

我有一个用html创建的表单,但是使用js并从数据库中提取数据。我想设计它,但我不知道怎么做。我有来自下面的和一些css,我如何将两者结合起来

<form id="database" name="database">
            <label>School</label>
            <select id="schoolList" name="schoolList" onchange="schoolChange()">
                <option value="null">Select a School</option>
            </select>

            <br />

            <label>Edit/Add a New Merchant</label><br />

            <span id="categoryNum">0</span>
            <select id="merchantCategoryList" name="merchantCategoryList" onchange="merchantCategoryChange()">
                <option value=null>New Category</option>
            </select>
            <span id="newCategory">
                <input id="newCategoryName" type="text" placeholder="Enter the name of the New Category." size="45" />
            </span>

            <br />

            <span id="merchantNum">0</span>
            <select id="merchantList" name="merchantList" onchange="merchantChange()">
                <option value="null">New Merchant</option>
            </select>
            <span id="newMerchant">
                <input id="newMerchantName" type="text" placeholder="Enter the name of the New Merchant." size="45" />
            </span>

            <br />

            <div id="merchantInfo">
                <label>Phone Number:</label>
                <input id="phone" type="text" placeholder="Phone Number" size="45" />
                <br />
                <label>Address:</label>
                <input id="address" type="text" placeholder="Address" size="45" />
                <br />
                <label>City:</label>
                <input id="city" type="text" placeholder="City" size="45" />
                <br />
                <label>State:</label>
                <input id="state" type="text" placeholder="State" size="45" />
                <br />
                <label>Zip:</label>
                <input id="zip" type="text" placeholder="Zip Code" size="45" />
                <br />
                <label>Hours:</label>
                <input id="hours" type="text" placeholder="Hours" size="45" />
                <br />
            </div>

            <input id="Save" type="button" value="Save" onclick="save();" />

学校
择校

编辑/添加新商户
0 新类别
0 新商人
电话号码:
地址:
城市:
声明:
邮编:
小时:

.表格标签{
宽度:150px!重要;
}
.表格标签左{
宽度:150px!重要;
}
.表格行{
垫面:1px;
垫底:1px;
}
.表格标签权利{
宽度:150px!重要;
}
.全部{
宽度:690px;
背景:透明;
颜色:#555555!重要;
字体系列:'Lucida Grande';
字体大小:14px;
}
.表格单选项目标签、.表格复选框项目标签、.表格分级标签、.表格标题{
颜色:#555555;
}
/*注入CSS代码*/
.表格标签顶部
{
显示:无!重要;
}
.表格文本框
{
宽度:500px!重要;
高度:40px!重要;
}
.表格提交按钮
{
宽度:500px!重要;
高度:40px!重要;
职位:相对!重要;
左:-151px!重要;
}
.形成所有输入,选择{
边框:1px实心#b7bbd;
-webkit边界半径:5px;
-moz边界半径:5px;
边界半径:5px;
填充:4px;
宽度:140px;
}

您的类名未应用于html。。。 如果要添加样式

html

表单标签的css

.myForm label{
 font-size: 16px;
 color: red;
}
现在您可以正确地设置样式了,下面是一些关于表单的提示以及设置表单样式的不同方法


通过向HTML元素添加
class
属性,将它们组合在一起。比如说,

<label class="form-label">School</label>
学校
添加它们的位置取决于您希望如何将元素与CSS设置关联


(最好使用不同的方法,尽可能编写使用元素选择器的CSS规则,等等)

将CSS放入
标记这些类不会添加到任何元素中。尝试在表单元素中添加类。
.myForm{
  width: 500px //or whatever
  height; 500px; // etc etc
}
.myForm label{
 font-size: 16px;
 color: red;
}
<label class="form-label">School</label>