テキストフィールドの2つの設定をオーバーライド

-1

私は次のHTMLコードを使ってテキストエリアを作成しました。 2つの設定を変更するテキストフィールドの2つの設定をオーバーライド

私が希望：ここ

<!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>

は結果がどのように見えるかです

1）私は、テキスト領域の高さが大きくなるようにしたいです、たとえば、8行のように。

2）領域の右下にある小さい三角形のシンボルを削除したい。

誰でもその方法を知っていますか？

出典

2016-05-21 SoftTimur

私はエリアの右下に小さな三角形の記号を削除します。

resize:noneあなたがtextareaのサイズを変更することはできませんので、三角形を非表示にするには、もう

私は、テキスト領域の高さが8行のように、大きくなりたいです例いくつかのheight COU

約8行を持つpx/em/rem/vhであること。 0 '： `パディングなぜ

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

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

出典

2016-05-21 23:23:24 dippas

？ – SoftTimur

@SoftTimur 'textarea'はデフォルトで' 1px'の 'padding'を持っています。私はそれをリセットするだけです。 – dippas

textareasの場合、rows = "4"を使用して行の量を増やすことができます。

そして、このCSSルールは、例えば8行

height: 8em;

2のように、私はテキスト領域の高さが大きくなるようにしたいリサイズ三角形

textarea { resize: none; }

出典

2016-05-21 23:20:07 Crecket

1を無効にします私はその領域の右下にある小さな三角形のシンボルを削除したいと思います。

resize: none;

スニペット

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

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

出典

2016-05-21 23:20:15

テキストフィールドの2つの設定をオーバーライド

答えて

関連する問題