Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change label using CSS?

Tags:

html

css

I am trying to change the content of an HTML label, but I do not have the capability to edit the HTML. Therefore, I am trying to change the text using CSS. Is there any selector to identify the label below, and if there is, how could I make the text show the word "Organization" instead of "Company"? Thank you.

<div class="control-group">
<label class="control-label" for="company" style="">Company</label>
<div class="controls">
<input id="settings-company" class="settings-company input-xlarge" type="text" data-config="required" value="My Organization" name="company">
</div>
</div>
like image 518
Isaac Y Avatar asked Feb 14 '15 18:02

Isaac Y


People also ask

How do you change label style in HTML?

The style attribute specifies the style, i.e. look and feel, of the <label> element. A style contains any number of CSS property/value pairs, separated by semicolons (;). The style attribute overrides any other style that was defined in a <style> tag or an external CSS file.

How do I access a label in CSS?

var element = document. querySelector("label[for=email]"); ...or in JavaScript using jQuery: var element = $("label[for=email]");

How do I style a label and input in CSS?

There are two ways to pair a label and an input. One is by wrapping the input in a label (implicit), and the other is by adding a for attribute to the label and an id to the input (explicit). Think of an implicit label as hugging an input, and an explicit label as standing next to an input and holding its hand.

How do I color a label in CSS?

We use the style attribute to set the font color in HTML. The style attribute specifies an inline style for an element, with the CSS property color. The attribute is used with the HTML <p> tag, with the CSS property color. HTML5 do not support the <font> tag, so the CSS style is used to add font color.


1 Answers

Hide the text with font-size:0; and add a pseudo element.

label { font-size: 0; }
label:before { content: "Organization"; font-size: 14px; }
like image 54
drip Avatar answered Sep 21 '22 15:09

drip