Question

如何让此表格像css一样格式化。我创建了名为database的表单类，然后在表单数据库中命名了类，但没有发生任何更改。将css添加到使用js的表单中会对其样式进行改变吗？

<style type="text/css">
        .database-label{
            width:150px !important;
        }
        .database-label-left{
            width:150px !important;
        }
        .database-line{
            padding-top:1px;
            padding-bottom:1px;
        }
        .database-label-right{
            width:150px !important;
        }
        .database-all{
            width:690px;
            background:transparent;
            color:#555555 !important;
            font-family:'Lucida Grande';
            font-size:14px;
        }
        .database-radio-item label, .database-checkbox-item label, .database-grading-label, .database-header{
            color:#555555;
        }


    .database-label-top
    {
    display:none !important;
    }
    .database-textbox
    {
    width: 500px !important;
    height:40px !important;
    }
    .database-save-button
    {
    width: 500px !important;
    height:40px !important;
    position:relative !important;
    left:-151px !important;
    }
    .database-all input,select {
    border: 1px solid #b7bbbd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 4px;
    width: 140px;
    }
    .database-dropdown
    {
    width: 500px !important;
    height:40px !important;
    }

    </style>

<form id="database" name="database" class="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();" />
        </form>

Answer 1

除了表单本身之外，您还没有为元素分配任何类。因此，您可以通过以下方式定位该表单中的元素：

form.database label{}

等

Answer 2

根据您的表单类名称，您必须为样式元素编写这样的css选择：

.database > label { /*for styling label }
.database > span{ /*for styling span}
.database > input{ /*for styling all input type}
.database > input[type="text"]{ /*for styling input with type text}
.database > input[type="button"]{ /*for styling input with type button}

这一切都来自我。祝你好运

Answer 3

向元素添加类，例如对于保存按钮，使用class =＆＃34; .database-save-button＆＃34; 否则声明像

这样的css类

#Save
    {
    width: 500px !important;
    height:40px !important;
    position:relative !important;
    left:-151px !important;
    }

为什么造型不起作用

3 个答案: