2

So I have a TextBox in my WinForm that I would want to design. I would like to achieve a text box that has no border except for its bottom part, just like the one in the Material Design Website:

enter image description here

But I have a few problems. I don't know how to code this one. Is there any way to code it like the one we use in CSS, i.e. border-bottom or something?

Visual Vincent
  • 18,045
  • 5
  • 28
  • 75
Francis Rubio
  • 175
  • 4
  • 18
  • 1
    [Change border color in TextBox C#](http://stackoverflow.com/a/39420512/3110834) - You can draw bottom-border and other borders using different colors. (Bottom white, others blue for example) – Reza Aghaei Oct 03 '16 at 07:22
  • 1
    [TextBox with bottom border](http://stackoverflow.com/a/38403722/3110834) - Another simple option by just adding a control to `TextBox` controls collection. – Reza Aghaei Oct 03 '16 at 07:25
  • I think I will use the second one. Thanks! – Francis Rubio Oct 03 '16 at 10:35
  • About the watermark you can follow such solution [Watermark TextBox in WinForms](http://stackoverflow.com/a/36534068/3110834). It enables you to use any color or format for watermark. – Reza Aghaei Oct 03 '16 at 11:15
  • Also using [such code](http://stackoverflow.com/a/38450341/3110834) or [this](http://stackoverflow.com/a/37949670/3110834) one you can add any other controls to left side or right side of `TextBox`. (For example for that X button) – Reza Aghaei Oct 03 '16 at 11:17

1 Answers1

3

I was able to create a design near the one in your image but not in the way you want it.

Here's the one I managed to make:

Search

What I used:

  • textbox for the search input
  • label for clearing the input,
  • line shape (found in Visual Basic PowerPacks in the toolbox) for the border effect OR
  • another label having a long underscore ( _ ).
  • and a picturebox for the search icon

Procedure:

For the textbox, set these properties:

  • BorderStyle : None
  • BackColor: 0, 188, 212 (or the color of your form's background) but that's the exact color based on the image you provided
  • ForeColor: White

For the clear button, I just used a label (it still has a click event), set the text to: "✖" and the BackColor to Transparent.

For the border effect, just draw a line shape below the textbox then set:

  • BorderColor: White
  • BorderWidth to 3

If you are using the label with underscores, just place it under the textbox.

Sorry got bored that I even included everything even though you're just asking for the border (still wondering why did I answer this on the first place). I hope this can still be of any help.

Aethan
  • 1,986
  • 2
  • 18
  • 25