Question

<form action="http://****.com/message/?fepaction=checkmessage" method="post" enctype="multipart/form-data">
    To: <br><input type="text" name="message_to" placeholder="Username of recipient" autocomplete="off" value=""><br>Subject:<br>
    <input type="text" name="message_title" placeholder="Subject" maxlength="65" value=""><br>Message:<br><div id="wp-message_content-wrap" class="wp-core-ui wp-editor-wrap tmce-active">
    .....    

</form>

我想隐藏

To: <br><input type="text" name="message_to" placeholder="Username of recipient" autocomplete="off" value="">

使用css

我目前的CSS是

#fep-content input[type=text] {
    width: 45%;
    min-width: 250px;
}

如果我添加

input[type="text"] {
    display: none;
}

然后两个字段都是隐藏的。我只想隐藏1个字段和单词＆＃34; To＆＃34;

怎么做？

Answer 1

 <form action="http://****.com/message/?fepaction=checkmessage" method="post" enctype="multipart/form-data">
<div id="something">
        To: <br><input type="text" name="message_to" placeholder="Username of recipient" autocomplete="off" value=""></div><br>Subject:<br>
        <input type="text" name="message_title" placeholder="Subject" maxlength="65" value=""><br>Message:<br><div id="wp-message_content-wrap" class="wp-core-ui wp-editor-wrap tmce-active">
        .....    

    </form>

添加

#something {
    display: none;
}

Answer 2

您可以使用Attribute selector

按名称选择输入

input[name="message_to"] {
  display: none;  
}

<form action="http://****.com/message/?fepaction=checkmessage" method="post" enctype="multipart/form-data">
    To: <br><input type="text" name="message_to" placeholder="Username of recipient" autocomplete="off" value=""><br>Subject:<br>
    <input type="text" name="message_title" placeholder="Subject" maxlength="65" value=""><br>Message:<br><div id="wp-message_content-wrap" class="wp-core-ui wp-editor-wrap tmce-active"></div>
</form>

Answer 3

你也可以这样隐藏：

input:nth-child(2) {
display: none;
}

http://www.w3schools.com/cssref/sel_nth-child.asp

Answer 4

您可以通过多种方式隐藏第一个输入（name=message_to）。要隐藏To，您可以使用:first-line然后将width和overflow:hidden提供给form，而不会将To包裹在元素中。

＆＃13;

/* input[name="message_to"] */
/* input:first-child */
/* input:nth-child(1) */
/* input:nth-of-type(1) */
input:first-of-type,
br:first-of-type{
  display: none;
}
form {
  width: 100%;
  overflow: hidden;
}
form:first-line {
  font-size: 0;
  line-height: 0;
}

＆＃13;

<form action="http://****.com/message/?fepaction=checkmessage" method="post" enctype="multipart/form-data">
  To:
  <br>
  <input type="text" name="message_to" placeholder="Username of recipient" autocomplete="off" value="">
  <br>Subject:
  <br>
  <input type="text" name="message_title" placeholder="Subject" maxlength="65" value="">
  <br>Message:
  <br>
  <div id="wp-message_content-wrap" class="wp-core-ui wp-editor-wrap tmce-active"></div>
</form>

＆＃13;

使用css隐藏输入类型=文本

4 个答案: