Label's Background Color

Malam Malam 121

How do I set a lable's background color to highlight ONLY the text, not the padding or spaces before and after the text?
I've tried the following but it highlight the space before the label

![<style>  
    .auto-style1 {  
    width: 18.4em;  
    background-color:red;  
    }  
    .input1[type="text"]{  
        width: 40em;  
    }  
  
</style>  
<p>  
    <label class="auto-style1" for="txtName">NAME:</label>  
    <input class="input1" type="text" id="txtName" name="tbName" />  
</p>][1]

AgaveJoe 26,246 Reputation points

2022-02-17T20:17:17.743+00:00
I can't reproduce the problem with the code shown. You might have a cascading issue with other styles. Use the browser's dev tools to view the styles assigned to the element.

Or try wrapping the text in a span...

<label class="auto-style1" for="txtName"><span>NAME:</span></label>

... then specifically overriding the styles. This is not a production solution but it might isolate the problem.

label span { margin: 0; padding:0; background-color:yellow; }

1 answer

Yijing Sun-MSFT 7,071 Reputation points

2022-02-18T05:22:42.177+00:00

Hi @Malam Malam ,
Could you post your result? I suggest you could press F12 when you run the page and you could look at your elements.

Best regards,
Yijing Sun

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Share via

Label's Background Color

1 answer