How To Change Html Tag ( label ) Stytle ( width ) Using CSS & Javascript

This article will tell you how to change the width of the Html <label> tag, the methods can also be used to change other Html tag’s styles.

Table of Contents

1. How To Change The Html Label Tag Width Using CSS & JavaScript.

1.1 Question.

My web page has a login form that contains a user name and password input text box.

But I find the label text User Name: and Password: do not align to the right side beautifully as I want.
How can I change the label width to make the User Name: and Password: label the same width?

Below is my web page Html source code.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>How To Change Label Width In Html Example</title>
</head>
<body>
<h3>How To Change Label Width In Html Example.</h3>

<div style="display:block; margin-top: 10px;">
    <label>
        User Name:
    </label>
    <input type="text" id="userName" value="Input user name." />
</div>

<div style="display:block; margin-top: 10px;">
    <label>
        Password:
    </label>
    <input type="password" id="password" value="Input password." />
</div>

</body>
</html>

1.2 Change The label Tag Width Using CSS.

You can use CSS to change the Html label‘s tag.

You can add the below CSS string to the label tag’s style attribute value, below is the full source code.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>How To Change Label Width In Html Example</title>
</head>
<body>
<h3>How To Change Label Width In Html Example.</h3>

<div style="display:block; margin-top: 10px;">
    <label style="display:inline-block;width:90px;text-align:right;">
        User Name:
    </label>
    <input type="text" id="userName" value="Input user name." />
</div>

<div style="display:block; margin-top: 10px;">
    <label style="display:inline-block;width:90px;text-align:right;">
        Password:
    </label>
    <input type="password" id="password" value="Input password." />
</div>

</body>
</html>

For simplicity, you can define the label tag CSS code in the Html source code <style></style> section, then the CSS style will be applied to all the Html label tags in the web page, below is the full source code.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>How To Change Label Width In Html Example</title>
<style>
    label{
        display:inline-block;
        width:90px;
        text-align:right; 
    }
</style>
</head>
<body>
<h3>How To Change Label Width In Html Example.</h3>

<div style="display:block; margin-top: 10px;">
    <label>
        User Name:
    </label>
    <input type="text" id="userName" value="Input user name." />
</div>

<div style="display:block; margin-top: 10px;">
    <label>
        Password:
    </label>
    <input type="password" id="password" value="Input password." />
</div>

</body>
</html>

1.3 Change The Label Tag Width Using JavaScript.

You can also use javascript to change the Html label tag’s width.
First, get all the label tag node lists on the web page.

Loop in the above label tag node list, for each label tag node, set its CSS property value like below.

labelNode.style.display = 'inline-block';

labelNode.style.width = '90px';

labelNode.style.textAlign = 'right';

Set the above javascript function to the web page body tag’s onload event.
```
<body onload="changeLabelTagWidth()">
```
If you find the above code does not take effect, you should check the source code carefully. For example, I make a mistake with the incorrect spell the style.display to style.diplay.
Below is the source code of the example files how-to-change-label-size-in-html.html, how-to-change-label-size-in-html.js.

how-to-change-label-size-in-html.html.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>How To Change Label Width In Html Example</title>
<script language="javascript" src="how-to-change-label-size-in-html.js"></script>
</head>
<body onload="changeLabelTagWidth()">
<h3>How To Change Label Width In Html Example.</h3>

<div style="display:block; margin-top: 10px;">
    <label>
        User Name:
    </label>
    <input type="text" id="userName" value="Input user name." />
</div>

<div style="display:block; margin-top: 10px;">
    <label>
        Password:
    </label>
    <input type="password" id="password" value="Input password." />
</div>

</body>
</html>

how-to-change-label-size-in-html.js.

function changeLabelTagWidth(){

    var labelNodeList = document.getElementsByTagName('label');

    var len = labelNodeList.length;

    for(var i=0;i<len;i++){

        labelNode = labelNodeList[i];

        labelNode.style.display = 'inline-block';

        labelNode.style.width = '90px';

        labelNode.style.textAlign = 'right';

        console.log('labelNode.innerHTML = ' + labelNode.innerHTML);
        console.log('labelNode.style.diplay = ' + labelNode.style.diplay);
        console.log('labelNode.style.width = ' + labelNode.style.width);
        console.log('labelNode.style.textAlign = ' + labelNode.style.textAlign);
    }

}

1. How To Change The Html Label Tag Width Using CSS & JavaScript.

1.1 Question.

1.2 Change The label Tag Width Using CSS.

1.3 Change The Label Tag Width Using JavaScript.

Leave a Comment Cancel Reply