Question

我有以下HTML代码来制作textarea。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Title</title>  
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
    <link href="Office.css" rel="stylesheet" type="text/css" />
    <script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script>
    <link href="Common.css" rel="stylesheet" type="text/css" />
    <script src="Notification.js" type="text/javascript"></script>
    <script src="Home.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
    <style>
    .ms-TextField.ms-TextField--multiline .ms-TextField-field {
    font-family: monospace;
    }
    </style>
</head>
<body class="ms-font-m">
    <div id="content-main">
    <div class="padding">
    <div class="ms-TextField ms-TextField--multiline">
        <textarea class="ms-TextField-field" id="myTextarea" spellcheck=false style="font-size: 16px;">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFG</textarea>
    </div>
    </div>
</body>
</html>

结果如下：

我想更改2个设置：

1）我希望文本区域的高度更大，例如8行，例如

2）我想删除该区域右下角的小三角形符号。

有谁知道怎么做？

Answer 1

对于textareas，你可以简单地使用rows =＆＃34; 4＆＃34;增加行数。

此css规则将禁用调整大小三角形

textarea {
   resize: none;
}

Answer 2

<强> 1。我希望文本区域的高度更大，例如8行，例如

height: 8em;

<强> 2。我想删除该区域右下角的小三角形符号。

resize: none;

<强>段

＆＃13;

.ms-TextField.ms-TextField--multiline .ms-TextField-field {
  font-family: monospace;
  height: 8em;
  resize: none;
}

＆＃13;

<div class="ms-TextField ms-TextField--multiline">
  <textarea class="ms-TextField-field" id="myTextarea" spellcheck=false style="font-size: 16px;">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFG</textarea>
</div>

＆＃13;

Answer 3

我想删除右下方的小三角形符号区域。

resize:none隐藏三角形，因为您无法再调整textarea的大小

我希望文本区域的高度更大，比如8行示例

某些height可能位于px / em / rem / vh，大约有8行。

＆＃13;

textarea {
  font-family: monospace;
  font-size:16px;
  resize: none;
  height: 10rem;
  padding: 0
}

＆＃13;

<textarea class="ms-TextField-field" id="myTextarea" spellcheck=false>=ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFG=ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFG=ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFG=ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFG=ABCDEFGHIJKLMNOPQRSTUVW</textarea>

＆＃13;

覆盖文本字段的2个设置

3 个答案: