How to format text in <asp:TextBox>

Question

Is there any way to make words bold, when using asp:TextBox? I know I can use html markup

with asp:Label but I'm still hoping I can figure something out for the textbox.

Can it be done?

Answer 1

asp:TextBox renders an <input> or <textarea>. with css, you can change the font properties, but it is for all text in the control. you can not control markup in the text.

to be able to bold words, etc, you need to use an editable div. which is how editing content on this site works. a common approach is to use a markup language, and store the input in a hidden <textarea>. then use a javascript library to copy to div with html markup. then allow editing of the div. google for wysiwyg javascript editors.

Answer 2

Hi @Coreysan,

You can set the Font-Bold property in the textbox to true.

<asp:TextBox ID="TextBox1" runat="server" Font-Bold="true" Text="Test"></asp:TextBox>

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
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

Answer 3

Actually, you can quite much style the textbox anyway you want.

Hence, say this:

            <asp:TextBox ID="TextBox1" runat="server"
                style="font-size:x-large;font-weight:bold;font-style:italic">
            </asp:TextBox>

And the result of the text box is now this:

So, say you download some calculator font, and then specify the font on the page like this:

            <style type="text/css">
                @font-face {
                    font-family: 'myCalculator';
                    src: url('/fonts/Calculator.ttf');
                }
            </style>


            <div style="padding:35px">

                <h3>Enter a number</h3>
                <asp:TextBox ID="txtCalc" runat="server"
                style="font-size:32px;font-family:myCalculator;
                    font-weight:bold;color:red;
                    border-style:solid;
                    border-color:black;padding:4px"                     
                >
                </asp:TextBox>

So, now we formatted the text box with color, bold, red, and our font.

Hence the result is now this:

So, you can use style, and quite much format a text box anyway you want, including even custom fonts if that is your goal.

However, if you are looking to format individual words, or say have a text box area that allows the user to edit, and choose the font etc.? Then I suggest adopting say a HTML editor control (like ckEdit, or even the AjaxToolKit one). That will allow editing of context say like this:

So, in above, the user can enter bold, text, color their text, change font size, and even paste-in photos. Just search for web based HTML editor.