Question

我想显示一个带有提交按钮的表单，将文本字段发布回服务器：

名为title的文字输入，带边框
名为chapter且section的文字没有边框，应在JavaScript中分配

我希望章节/节不可修改和简短。但标题是一个正常输入，应该非常接近标题，如：

Chapter 3 Section 4 
       _____________
Title |_____________|

我写了像"input[type="notext"]{border: none}这样的CSS，然后两个文本输入都有边框，或者没有边框。我基本上希望两个输入有不同的风格，或者章节/部分的其他类型的字段对我来说设置值也很好。那么如何实现呢？不需要兼容IE8以及之前的兼容性。

input[type="text"]{
border: none;
font-size: 16px;
}

<form action="#" method="post" id="form" >
    <table>
        <tr>
            <td>Chapter<input type="text" value="3" name="cha_n" readonly/></td>
            <td>Section <input type="text" value="4" name="sec"     readonly/></td>
        </tr>
        <tr>
            <td>Title  </td>
            <td><input type="text" style="inputtext" name="title" id="title"/></td>
        </tr>
        <tr>
            <td span='2'><a id="submit" href="javascript: check()">Send</a></td>
        </tr>
    </table>
</form>

Answer 1

您可以为输入定义一个CSS类，只需使用它们。

对于带有类示例的输入：

input.example {
        border: none;
        font-size: 16px;
}

像这样使用：

<input class="example" type="text" value="3" name="cha_n" readonly/>

示例：http://jsfiddle.net/x762v24a/

实现这一目标的一种不太通用的方法是使用CSS属性选择器：

input[name="cha_n"] {
    border: none;
}

Answer 2

要删除章节和部分输入上的边框，请使用：

＆＃13;

input[readonly] {
  border:none;
}

＆＃13;

<form action="#" method="post" id="form" >
    <table>
        <tr>
            <td>Chapter<input type="text" value="3" name="cha_n" readonly/></td>
            <td>Section <input type="text" value="4" name="sec"     readonly/></td>
        </tr>
        <tr>
            <td>Title  </td>
            <td><input type="text" style="inputtext" name="title" id="title"/></td>
        </tr>
        <tr>
            <td span='2'><a id="submit" href="javascript: check()">Send</a></td>
        </tr>
    </table>
</form>

＆＃13;

Answer 3

尝试给出具有相同风格和“类”属性的输入，然后：

.style1
{
    border = 0px solid #FFFFFF;
}
.style2
{
    margin = 0px;
    padding = 0px;
    border = 1px;
}
<form action="#" method="post" id="form" >
<table>
    <tr>
        <td>Chapter<input type="text" value="3" name="cha_n" class="style1" readonly/></td>
        <td>Section <input type="text" value="4" name="sec"  class="style1"   readonly/></td>
    </tr>
    <tr>
        <td>Title  </td>
        <td><input type="text" style="inputtext" class="style2" name="title"id="title"/></td>
    </tr>
    <tr>
        <td span='2'><a id="submit" href="javascript: check()">Send</a></td>
    </tr>
</table>

Answer 4

<form action="#" method="post" id="form" >
    <table>
        <tr>
            <td>Chapter<input type="text" value="3" name="cha_n" /></td>
            <td>Section <input type="text" value="4" name="sec" /></td>
        </tr>
        <tr>
            <td>Title</td>
            <td><input type="text" style="border:none;font-size:14px;" name="title"/></td>
        </tr>
        <tr>
            <td span='2'><a id="submit" href="javascript: check()">Send</a></td>
        </tr>
    </table>
</form>

如何在相同的html表单中使用不同的输入文本样式？

4 个答案: