CODEWITHSUNDEEP
htmlcss
user7967341
user7967341

Reputation:

How can I make curved form text inputs in HTML & CSS?

I have a project to create a website designed in PhotoShop. I want to create a to textbox in HTML and CSS which looks like this:

Image that I want to convert

As you can see, there is no problem with the background or fonts; the problem is the textbox. How can I create textboxes with these curves?

Upvotes: 1

Views: 3689

Answers (2)

Sahil Dhir
Sahil Dhir

Reputation: 4240

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

div {
  background: #444;
  direction: rtl;
  width: 300px;
  padding: 20px;
}

label {
  width: 100%;
  color: #fff
}

input {
  border-radius: 0 2em;
  padding: 0 10px;
  width: 100%;
  border: none;
  line-height: 2em;
  margin-bottom: 20px;
}

textarea {
  border-radius: 0 4em;
  padding: 0 10px;
  width: 100%;
  border: none;
  line-height: 2em;
  margin-bottom: 20px;
}

input[type="submit"] {
  max-width: 100px;
}
<div class="wrapper">
  <label>Name</label>
  <input type="text" />
  <label>Email</label>
  <input type="text" />
  <label>Message</label>
  <textarea></textarea>

  <input type="submit" value="Submit" />

</div>

Upvotes: 3

Manngo
Manngo

Reputation: 16371

This is how to get the shape in your image. You will need to learn a bit about border-radius.

The following is an example:

div#test {
  border: thin solid #666;
  width: 8em;
  height: 2em;
  border-radius: 0 2em 0 2em;
}
<div id="test">&nbsp;</div>

The border-radius property is responsible for rounding corners. It can be very sophisticated, but the simple one here will do the job. You will just need to adjust some of the values.

The four values in the border-radius property represent the radius of the individual borders, clockwise from the top-left corner.

Upvotes: 1

Related Questions