2016-05-21 4 views
-1

У меня есть следующий код HTML, чтобы сделать текстовое поле.Переопределить 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> 

Вот как результат выглядит следующим образом:

enter image description here

Я хотел бы изменить 2 настройки:

1) Я хочу, чтобы высота области текста, чтобы быть больше, например, 8 строк, например

2) Я хочу удалить символ малого треугольника в правом нижнем углу области.

Кто-нибудь знает, как это сделать?

ответ

0

Я хочу, чтобы удалить небольшой треугольный символ в правой нижней части области.

  • resize:none, чтобы скрыть треугольник, потому что вы не сможете изменить размер textarea больше

Я хочу высоту текстовой области, чтобы быть больше, как 8 строк для пример

  • некоторые height, что Коу ld находится в px/em/rem/vh иметь около 8 строк.

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>

+0

Почему 'утеплитель: 0'? – SoftTimur

+1

@SoftTimur 'textarea' имеет по умолчанию' padding' '1px' Мне просто нравится его сбросить .. ничего особо .. – dippas

1

Для текстовых полей вы можете просто использовать rows = "4" для увеличения количества строк.

И это правило CSS отключит изменения размера треугольника

textarea { 
    resize: none; 
} 
1

1. Я хочу высоту текстовой области, чтобы быть больше, как 8 строк, например

height: 8em; 

2 Я хочу удалить символ маленького треугольника в правом нижнем углу области.

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>

Смежные вопросы