无法更改文本区域的宽度

时间:2019-10-03 14:57:43

标签: html css forms textarea width

我无法使用html行和cols来更改textarea的宽度,也无法使用CSS宽度来更改它。我用html改变了高度。

如何更改宽度?

form,
label {
  position: relative;
  width: 310px;
  margin-left: 65px;
}

input,
textarea {
  border-radius: 4px;
  line-height: 30px;
  flex: 0 0 200px;
  margin-left: 10px;
  height: 35px;
}

label,
input,
textarea {
  display: block;
  margin-top: 20px;
  margin-right: -300px;
}

form {
  margin-top: 100px;
  margin-left: 580px;
  display: block;
  margin-top: 20px;
}
<div class="text-area"><label class="l-message">Message * <textarea name="message" type="textarea" class="message" style="height: 105px;" required></textarea></label></div>

1 个答案:

答案 0 :(得分:2)

有几种更改宽度的方法。您可以内联或在CSS中进行。建议使用CSS。请查看下面的代码段

    form, label {
    position: relative;
    width: 310px;
    margin-left: 65px;
    }

    input, textarea {
    border-radius: 4px;
    line-height: 30px;
    flex: 0 0 200px;
    margin-left: 10px;
    height: 35px;
    width: 100%; /* or whatever width you want to set */
    }
    .form-area {
    background-color: #FAFAFA;
    padding: 0px 0px 40px;
    margin: 30px 265px 0px;
    border: 1px solid GREY;
    border-radius: 6px;
    width: 710px;
    height: 360px;
    }

label, input, textarea {
    display: block;
    margin-top: 20px;
    margin-right: -300px;
}
form {
margin-top: 100px;
margin-left: 580px;
display: block;
margin-top: 20px;
}
<div class="text-area"><label class="l-message">Message * <textarea name="message" type="textarea" class="message" style="height: 105px;" required></textarea></label></div>