How do you make just some text, inside an input text field, bold?

Question

How do you make just some text, inside an input text field, bold?

32.7k Views Asked by clinchergt At 04 April 2025 at 22:48

I'm trying to get bold specific text, inside an input text field. I'm not sure how to go about it since html code isn't interpreted inside a text field, so anything like <b> won't work. Is it possible to bold just some text? Methods like bold() only add <b> around the string.

Thanks

Original Q&A

There are 4 best solutions below

Travesty3 On 31 May 2012 at 18:45

Perhaps a possible solution would be for you to use an editable div, like this:

<div contentEditable="true">
    Lorem <b>ipsum</b> dolor
</div>

If you are trying to submit this value in a form, you'll have to use JavaScript to get the innerHTML of this div and assign it to a hidden input or something.

Matt Kelly On 31 May 2012 at 18:52

It depends on what browsers you want to support. If you just want to support HTML5 browsers just drop in a div with the contenteditable flag set and style it with css to look like an input.

<div contenteditable>Text <b>bold</b></div>

If the bold is in a very controlled area, than maybe do something like:

<div>
    <input type="text" style="font-weight: bold;" value="Bold text" />
    <input type="text" value="This is not" />
</div>

Using CSS to style it and JS to manage the overhead. This could quickly get ugly though.

Mehdi Raash On 15 January 2018 at 19:41

The most true way to have such a thing is to build your own custom element.

you can create your own <my-input></my-input> element, and customise your own input.

**Mic** · Accepted Answer

Here is one trick.

An INPUT field is over a SPAN. With a an example of function that puts the 3 first chars in bold. You may run into transparency trouble with older browser. In that case you can leave the normal input field without the bold effect.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>transp</title>
    <style>
        div{
            position:relative;
        }
        input, span{
            top:0;
            position:absolute;
            width:120px;
        }
        span{
            top:2px;
            left:2px;
            z-index:1;
            overflow:hidden;
        }
        input{
            background:transparent;
            z-index:2;
        }
    </style>
</head>
<body>
<div>
    <input onkeyup="bold3(this)" />
    <span id="back"></span>
</div>
<script>
function bold3(inp){
    inp.style.color = 'transparent';
    var span = document.getElementById('back');
    span.innerHTML = 
        '<b>' + 
        inp.value.substr(0, 3) + 
        '</b>' + 
        inp.value.substr(3);
}
</script>
</body>
</html>

How do you make just some text, inside an input text field, bold?

There are 4 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in TEXT

Related Questions in INPUT

Related Questions in BOLD

Trending Questions

Popular # Hahtags

Popular Questions