0

I have a problem with styling a textarea, i use bootstrap 4 css

i was trying to styling by my self but if i using a padding or margin it's make the textarea height to big

.comment-box {
  padding: 0.8rem 1rem;
  border-radius: 30px;
}
<textarea class="form-control comment-box" rows="1"></textarea>

i want this textarea look like input field with button in inside just like this image

textarea input

Calvin Nunes
  • 6,376
  • 4
  • 20
  • 48
Fajar Ramdani A
  • 3
  • 1
  • 6
  • 1
    You style it as you would style an `input`... just add a `resize: none` to remove the option to the user rezise the box. But, why to use a textarea to look like an input instead of using a real input? – Calvin Nunes Sep 13 '19 at 17:12
  • why I use textarea, because for the comments column that can accommodate a lot of text – Fajar Ramdani A Sep 13 '19 at 18:51

2 Answers2

0

Here is the complete explanation about overriding bootstrap style. I am sure you can follow that rule and solve that issue.

Edit: Also you don't need to implement his first and second step. You can follow only 3 and create new style that override the bootstrap style

jad
  • 138
  • 8
0

https://www.w3schools.com/howto/howto_css_contact_form.asp">here is a link to your answer

that should solve your issue, check out the css they use and play with it.

input[type="text"],
select,
textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 10px;
}

input[type="submit"] {
  border: none;
  background: #4aaaa5;
  padding: 12px 20px;
  border-radius: 4px;
  cursor: pointer;
  color: #ffffff;
  font-size: 16px;
}
Grayson McMurry
  • 11
  • 5