How to Hide Element Label by Element Id in CSS

How to hide element label by element id in CSS?

If you give the label an ID, like this:

<label for="foo" id="foo_label">

Then this would work:

#foo_label { display: none;}

Your other options aren't really cross-browser friendly, unless javascript is an option. The CSS3 selector, not as widely supported looks like this:

[for="foo"] { display: none;}

How to hide label for= CSS

label[for="secondname"]
{
    display:none;
}

CSS Hide some text with class and id

You can try using :lang selector css. But, it can be tricky taking into account all cases, xml lang etc. I think the javascript to detect the user's browser's language is simple, so why not just set a global class based on that, and then you can hide / show with css accordingly. You do need to make sure you've got a complete list of possible lang values.

var language = window.navigator.userLanguage || window.navigator.language;

alert(language);

document.getElementById('content').className = language;

div {

  visibility: hidden;

}

#content.fr .french {

  visibility: visible;

}

#content.en-US .english {

  visibility: visible;

}

#content.sp .spanish {

  visibility: visible;

}

<div id="content" class="default">

  <div class="french">Si votre navigateur préférence lang est francais , vous devriez voir cette

  </div>

  <div class="english">If your browser lang preference is ENGLISH you should see this

  </div>

  <div class="spanish">Si su navegador lang preferencia es espanol debería ver esto

  </div>

</div>

edit style properties of label without ID

When you want to select a single element from the DOM with JavaScript, using getElementById() or querySelector() will do the trick. There is no need to return a live HTMLCollection or static (not live) NodeList to select a single element. Since you can't use getElementById because the <label> doesn't have an id, just utilize querySelector() to select the label element and hide it. Or hide the content in a more accessible manner for those using assistive technologies with the clip-pattern.

You could hide the <label> in a few different ways:

1. Add inline style directly like element.style.display = "none"
2. Create a CSS class to add, ie .hide { display: none } and then element.classList.add("hide")

const label = document.querySelector(".dhx_fullday");
label.style.display = "none"; /* basic example */

<div id ="area" class="dhx_cal_lsection">
  "Text"
  <label class="dhx_fullday">
    <input type="checkbox" name="full_day" value="true">
    "Text in label"
  </label>
</div>

How to hide label of html input element

In .html add:
style="display: none;"

or add html tag :

<label hidden>{{edit_card.id}}</label>

or in .css file add style for element with id='fillex':
#fillex {display:none;}

{{edit_card.id}} will be invisible for user but accessible by Right Mouse Click - inspect from browser.

How can I hide an element that doesn't have an id from the CSS?

I found a solution that worked for me:

I had two similar elements in my html page that I needed to hide working only from the CSS.

<div class="notToBeHidden">
  <label class="label aClassToBeHidden" for="aClassToBeHidden">
  <div class="forminput aClassToBeHidden">
</div>
<div class="notToBeHidden">
  <label class="label anotherClassToBeHidden" for="anotherClassToBeHidden">
  <div class="forminput anotherClassToBeHidden">
</div>

I hid the elements by writing in the CSS:

.label.aClassToBeHidden{display: none}
.forminput.aClassToBeHidden{display: none}
.label.anotherClassToBeHidden{display: none}
.forminput.anotherClassToBeHidden{display: none}

Since I hid before id elements by selecting them like:

#elementToBeHidden{display: none}

I didn't know how to use the same concept with elements within classes.

Again, thanks to everyone!

Hide div element inside div using css

Your ID contains space it is not valid in html.

id's value must not contain whitespace (spaces, tabs etc.). Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID. more info visit this

#checkbox-Norecentexperience_txh6181p{display:none;}// remove checkbox
#checkbox-Norecentexperience_txh6181p+label{display:none;} // to remove label

#checkbox-Norecentexperience_txh6181p{display:none;}
#checkbox-Norecentexperience_txh6181p+label{display:none;}

<div class="row">
  <div class="grid-layout-col">
    <div class="layout-col col-sm-12 col-xs-12">
      <div id="formElement8" class="elq-field-style form-element-layout row">
        <div style="text-align: left;" class="col-sm-12 col-xs-12"><label class="elq-label" for="fe1729">skills</label></div>
        <div class="col-sm-12 col-xs-12">
          <div class="row">
            <div class="col-xs-12">
              <div class="field-control-wrapper" id="fe1729">
                <div class="list-order one-column">
                  <input type="checkbox" id="checkbox-Used Java for school projects_hvba7ekg" value="Used Java for school projects" name="checkboxes" />
                  <label class="checkbox-aligned elq-item-label" for="checkbox-Used Java for school projects_hvba7ekg">Used Java for school projects</label><br />
                </div>

                <div class="list-order one-column">
                  <input type="checkbox" id="checkbox-0-1 years of professional experience_uwv0lzq" value="0-1 years of professional experience" name="checkboxes" />
                  <label class="checkbox-aligned elq-item-label" for="checkbox-0-1 years of professional experience_uwv0lzq">0-1 years of professional experience</label><br />
                </div>

                <div class="list-order one-column">
                  <input type="checkbox" id="checkbox-1-3 years of professional experience_jp55zebf" value="1-3 years of professional experience" name="checkboxes" />
                  <label class="checkbox-aligned elq-item-label" for="checkbox-1-3 years of professional experience_jp55zebf">1-3 years of professional experience</label><br />
                </div>

                <div class="list-order one-column">
                  <input type="checkbox" id="checkbox-4+ years of professional experience_uey2b9qdk" value="4+ years of professional experience" name="checkboxes" />
                  <label class="checkbox-aligned elq-item-label" for="checkbox-4+ years of professional experience_uey2b9qdk">4+ years of professional experience</label><br />
                </div>

                <div class="list-order one-column">
                  <input type="checkbox" id="checkbox-Norecentexperience_txh6181p" value="No recent experience" name="checkboxes" />
                  <label class="checkbox-aligned elq-item-label" for="checkbox-Norecent experience_txh6181p">No recent experience</label><br />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

---

Related Topics