如何在同一个 html 表单中有不同的输入文本样式？

Posted 2023-04-18

【中文标题】如何在同一个 html 表单中有不同的输入文本样式？

【英文标题】：How to have different input text styles in same html form?

【发布时间】：2014-11-10 22:56:30

【问题描述】：

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

一个名为 title 的文本输入，带有边框 文本称为chapter 和section 没有边框，它们应该在javascript 中分配

我希望章节/章节不可修改且简短。但是Title是一个正常的输入，应该和Title很接近，比如：

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>

【参考方案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;

【讨论】：

谢谢，有没有办法将章节输入框最小化，因为该值已经设置为只读？

是的，有，但是样式不能仅仅通过 CSS 动态改变，你必须使用脚本，如果可以的话

如果您知道要处理的值的范围，也可以使用输入的 size 属性来调整它们的大小

【参考方案2】：

要删除章节输入的边框，请使用：

input[readonly] 
  border:none;

<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>

【参考方案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>

【讨论】：

我放了小提琴，它没有像你说的那样工作？

您的 CSS 语法无效。

【参考方案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>