css hide text in form block

Question

<div class="tree-control">
<form>
   <div class="input-append" style="margin-right: 10px;">
       <input class="tree-search" type="text">
       <button title="search" class="btn tree-search-btn" type="button"/>
   </div>

   <a href="">link</a>
   some text
   <a href="">link</a>

</form>
</div>

Can I hide some text without adding any tags to html?

I'm trying do smth like that:

div.tree-control form {
    display:none;
}

div.tree-control form > div:first-of-type {
    display:block;
}

but it will hide all form. How can I hide just text?

Possible duplicate of [Is there a CSS selector for elements containing certain text?](https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text) — xxxmatko, Sep 11 '17 at 08:53

score 2 · Accepted Answer · answered Sep 11 '17 at 08:56

You could use the visibility property here.

The visibility property is different than the display property in that it allows a parent element to be hidden and a child to be visible.

div.tree-control form {
    visibility: hidden; /* hide the whole form */
}

div.tree-control form > div:first-of-type {
    visibility: visible; /* make the first div in the form visible */
}

div.tree-control form {
    visibility: hidden;
}

div.tree-control form > div:first-of-type {
    visibility: visible;
}

<div class="tree-control">
<form>
   <div class="input-append" style="margin-right: 10px;">
       <input class="tree-search" type="text">
       <button title="search" class="btn tree-search-btn" type="button"/>
   </div>

   some text

</form>
</div>

score 0 · Answer 2 · answered Sep 11 '17 at 09:37

There is no methods for disabling only the text when you not allow to give a tag. But there is always a workaround for you.

Changing the color of the text as the same as the background. Hope this could help you.

<!DOCTYPE html>
<html>
<head>
<style>

div.tree-control form {
    color:white;
}


div.tree-control form > div:first-of-type {
    display:block;
}
</style>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

<div class="tree-control">
<form>
   <div class="input-append" style="margin-right: 10px;">
       <input class="tree-search" type="text">
       <button title="search" class="btn tree-search-btn" type="button">
       I am Button
       </button>
   </div>

   some text

</form>
</div>

score -2 · Answer 3 · answered Sep 11 '17 at 09:35

You can always add text as an element - <p>Some Text</p> <label>Some Text</label> <span>Some Text</span>

Assign and Id or Class and simple display: none; will do.

form span{
  display: none;
}

<div class="tree-control">
<form>
   <div class="input-append" style="margin-right: 10px;">
       <input class="tree-search" type="text">
       <button title="search" class="btn tree-search-btn" type="button"/>
   </div>

   <a href="">link</a>
   <span>some text</span>
   <a href="">link</a>

</form>
</div>

css hide text in form block

3 Answers3