How to remove border of top and both sides of a TextBox

I'm with struggle with how to remove border of top and both sides of TextBox in Windows Forms project

I want the TextBox looks like this:

My textbox code:

this.textBox1.Anchor = System.Windows.Forms.AnchorStyles.None;
this.textBox1.Location = new System.Drawing.Point(85, 101);
this.textBox1.Name = "textBox1";
this.textBox1.PlaceholderText = "Login";
this.textBox1.Size = new System.Drawing.Size(213, 23);
this.textBox1.TabIndex = 0;
this.textBox1.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle;

Could you help me with this?

First, quick and dirty solution

Create a Label with repeated underscore characters and locate it at the bottom of the login TextBox:

txtName.BorderStyle = BorderStyle.None;
Label lblBottomBorder = new Label();
lblBottomBorder.ForeColor = Color.Blue;
lblBottomBorder.Width = txtName.Width + 8;
lblBottomBorder.Text = new String('_', 250);
lblBottomBorder.Location = new Point(txtName.Location.X - 3, txtName.Location.Y + 3);
Controls.Add(lblBottomBorder);

EDIT:

Second and more flexible solution

Override the Form.OnPaint() method and draw a custom line under the login TextBox using the Graphics.DrawLine() method:

public partial class FrmLogin : Form
{
    public FrmLogin()
    {
        InitializeComponent();
        Text = "Login";
        StartPosition = FormStartPosition.CenterScreen;
        MaximizeBox = false;
        MinimizeBox = false;
        FormBorderStyle = FormBorderStyle.FixedDialog;
        Font = new Font("Segoe UI", 10);
        BackColor = Color.White;
        AcceptButton = btnOK;
        Activated += (sender, e) => txtEmail.PlaceholderText = "Email, phone or Skype";

        lblEnter.Font = new Font("Segoe UI", 14, FontStyle.Bold);
        txtEmail.BorderStyle = BorderStyle.None;
        txtEmail.ForeColor = Color.DimGray;

        btnOK.BackColor = Color.DarkBlue;
        btnOK.ForeColor = Color.White;
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        Point txtEmailLocation = PointToClient(PointToScreen(txtEmail.Location));
        var lineStart = new Point(txtEmailLocation.X, txtEmailLocation.Y + txtEmail.Height + 7);
        var lineEnd = new Point(txtEmailLocation.X + txtEmail.Width, txtEmailLocation.Y + txtEmail.Height + 7);
        Pen pen = new Pen(Color.Blue) { Width = 2 };
        e.Graphics.DrawLine(pen, lineStart, lineEnd);
    }
}

Please note that the TextBox.PlaceholderText property requires .NET 5+. The screenshot of the login form is:

Not as elegant as the Microsoft page but it gets the job done.

Try out this simple UserControl. It just contains a standard TextBox Control and adds some properties to define the new behavior.

• It provides custom painting of the background to show a resizable line at the bottom
• Allows to change the Color of the bottom line
• Auto-sizes depending on the current TextBox size (e.g, when you change the Font)
• Can set a Cue Banner (grayed text) when the text is empty
• Allows to set a replacement char when the input box is used to enter a Password
• Allows Right-To-Left layout

You can of course add other stuff as you go (e.g., adding some graphic elements it's quite simple)

To build this UserControl:

• Add a new UserControl to the Project, name it TextBoxInput (for now)
• Set its Width to 150
• Set its Padding to (3, 10, 3, 1) and BorderStyle = None
• Set its AutoScaleMode = Dpi
• Add a TextBox, name it EditControl and dock it to Top
• Change the BackColor and ForeColor properties of the UserControl to match the TextBox's properties
• Replace what's in the code file with the code you find here (preserving the namespace)
• Build the Project, find your UserControl in the ToolBox and drop it on a Form

using System;
using System.Collections;
using System.ComponentModel;
using System.Drawing;
using System.Runtime.InteropServices;
using System.Windows.Forms;
using System.Windows.Forms.Design;

[Designer(typeof(TextBoxInputDesigner))]
public partial class TextBoxInput : UserControl {
    private string m_CueBanner = string.Empty;
    private bool m_CueBannerShowOnFocus = true;
    private Color m_LineColor = Color.CadetBlue;
    private int m_LineDistance = 4;
    private int m_LineHeight = 1;

    public TextBoxInput() {
        InitializeComponent();
        ResizeRedraw = true;
        Padding = new Padding(3, 10, 3, 1);
        EditControl.TextChanged += (_, __) => OnTextChangedInternal(EditControl.Text, false);
        EditControl.HandleCreated += (_, __) => SetCueBanner(EditControl.Handle, m_CueBanner, m_CueBannerShowOnFocus);
        CueBanner = "<Enter CueBanner>";
    }

    public string CueBanner { 
        get => m_CueBanner;
        set {
            m_CueBanner = value;
            SetCueBanner(EditControl.Handle, m_CueBanner, m_CueBannerShowOnFocus);
        } 
    }

    [DefaultValue(true)]
    public bool CueBannerShowOnFocus { 
        get => m_CueBannerShowOnFocus; 
        set {
            m_CueBannerShowOnFocus = value;
            SetCueBanner(EditControl.Handle, m_CueBanner, m_CueBannerShowOnFocus);
        }
    }

    public Color LineColor {
        get => m_LineColor;
        set {
            m_LineColor = value;
            Invalidate();
        }
    }

    [DefaultValue(1), Description("Sets the height of the Line. Allowed values (1, 8)")]
    public int LineHeight {
        get => m_LineHeight;
        set {
            m_LineHeight = Math.Max(1, Math.Min(value, 8));
            Invalidate();
            OnResize(EventArgs.Empty);
        }
    }

    [DefaultValue(false)]
    public bool IsPassword { 
        get => EditControl.UseSystemPasswordChar;
        set => EditControl.UseSystemPasswordChar = value;
    }

    [Bindable(true), Browsable(true), EditorBrowsable(EditorBrowsableState.Always)]
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
    public override string Text {
        get => base.Text; 
        set {
            OnTextChangedInternal(value, true);
        } 
    }

    protected override void OnBackColorChanged(EventArgs e) {
        base.OnBackColorChanged(e);
        EditControl.BackColor = base.BackColor;
    }

    protected override void OnForeColorChanged(EventArgs e) {
        base.OnForeColorChanged(e);
        EditControl.ForeColor = base.ForeColor;
    }

    protected override void OnLayout(LayoutEventArgs e) {
        base.OnLayout(e);
        ClientSize = new Size(ClientSize.Width, EditControl.Bounds.Bottom + m_LineDistance + m_LineHeight + 1);
    }

    protected override void OnPaintBackground (PaintEventArgs e) {
        base.OnPaintBackground(e);
        int yPos = EditControl.Bounds.Bottom + m_LineDistance + (m_LineHeight / 2);
        using (var pen = new Pen(m_LineColor, m_LineHeight)) {
            e.Graphics.DrawLine(pen, 0, yPos, ClientSize.Width, yPos);
        }
    }

    protected override void OnRightToLeftChanged(EventArgs e) {
        base.OnRightToLeftChanged(e);
        EditControl.RightToLeft = RightToLeft;
    }

    internal virtual void OnTextChangedInternal(string text, bool internalCall) {
        base.Text = text;
        if (internalCall) EditControl.Text = text;
        OnTextChanged(EventArgs.Empty);
        SetCueBanner(EditControl.Handle, m_CueBanner, m_CueBannerShowOnFocus);
    }

    public void SetCueBanner(IntPtr handle, string text, bool showOnFocus) {
        if (handle != IntPtr.Zero) {
            SendMessage(handle, EM_SETCUEBANNER, showOnFocus ? 1 : 0, text);
        }
    }

    private const int EM_SETCUEBANNER = 0x1501;

    [DllImport("user32.dll", CharSet = CharSet.Unicode, SetLastError = true)]
    private static extern int SendMessage(IntPtr hWnd, int msg, int wParam, string lParam);
}

Custom designer. This is used just to remove some irrelevant properties and the default text assigned to a Control (so the Cue Banner is shown instead).

To use the designer in a .NET 5+ application, install, via NuGetPackage Manager, the Microsoft.WinForms.Designer.SDK support.

public class TextBoxInputDesigner : ControlDesigner {
    private readonly string[] RemovedProperties = new[] {
            "AutoSize", "AutoSizeMode", "AutoScroll", "AutoScrollMargin","AutoScrollMinSize",
            "BackgroundImage", "BackgroundImageLayout", "Cursor"
        };

    public TextBoxInputDesigner() { }

    public override void InitializeNewComponent(IDictionary defaultValues) {
        base.InitializeNewComponent(defaultValues);

        var descriptor = TypeDescriptor.GetProperties(Component)["Text"];
        if (descriptor != null && (descriptor.PropertyType == typeof(string))) {
            descriptor.SetValue(Component, string.Empty);
        }
    }

    protected override void PreFilterProperties(IDictionary properties) {
        foreach (string prop in RemovedProperties) {
            properties.Remove(prop);
        }
        base.PreFilterProperties(properties);
    }
}

This is how it works: