Use css to hide input type=text

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>

I want to hide

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

using css

My current css is

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

If I add

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

then both 2 fields are hide. I just want to hide 1 field and the word "To"

How to do that?

Answer 1

You can select input by name using 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>