Удаление меток точек из textarea

Как удалить правые нижние угловые точки из textarea?

Существует решение со следующим css resize:none, но я не хочу удалять изменение размера...

Так что это можно сделать...

Ответ 1

попробуйте два способа:

.none::-webkit-resizer {
    display: none;
}
.pic::-webkit-resizer {
    background:    url(http://www.zhangxinxu.com//study/image/selection.gif);
    outline: 1px dotted #000;
}

<textarea class="none"></textarea>
<textarea class="pic"></textarea>

Ответ 2

Вы не можете удалить ручку изменения размера без свойства resize:none;. Но вы можете позиционировать div на этих пунктирных линиях (изменить размеры ручек). См. Демо здесь

textarea {
    position: relative;
    margin: 20px 0 0 20px;
    z-index: 1;
}
.wrap {
    position: relative;
    display: inline-block;
}

.handle-hide {
    height:12px;
    width:12px;
    position: absolute;background:#fff;
    bottom: 2px;
    right: 2px;
    pointer-events: none;
    z-index: 2;
}

<div class="wrap">
    <div class="handle-hide"></div>
    <textarea placeholder="drag the cyan triangle..."></textarea>
</div>

Ответ 3

Используя jQuery, это возможно, я нашел jQuery UI здесь

С помощью этого исходного кода вы можете настроить текстовое поле

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Resizable - Textarea</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-resizable-se {
    bottom: 17px;
  }
  </style>
  <script>
  $(function() {
    $( "#resizable" ).resizable({
      handles: "se"
    });
  });
  </script>
</head>
<body>

<textarea id="resizable" rows="5" cols="20"></textarea>


</body>
</html>

Просто переопределите CSS, добавив

<style>
    .ui-icon, .ui-widget-content .ui-icon {
    background-image: none;
    }
</style>

после:

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">

Ответ 4

Вы считали решение маскировки?

Вот базовый пример (проверен только на Chrome):

textarea {
    border: 1px solid #000;
    box-shadow: inset .3em 0 #000, 
                inset -.3em 0 #000,
                inset 0 .3em #000,
                inset 0 -.3em #000;
    padding: 10px;
}

DEMO: http://jsfiddle.net/onzqnk5v/

ОБНОВЛЕНИЕ (на основе комментариев):

Этот ответ является просто концепцией для рассмотрения. Пример кода предназначен для иллюстрации концепции, а не для окончательного решения.

Ответ 5

Здравствуйте, ЗДЕСЬ - это рабочий пример моего ответа:

Сначала нужно указать, что это основано на CSS3 resize, который не поддерживается полностью во всех браузерах.

HTML 

<div class="resize_this">
    <textarea class="no_dots"></textarea>
</div>

ENDS HTML

CSS3
.no_dots{
  resize: none;
  width: 100%;
  height: 100%;
  border:none;
}

.resize_this{
  resize:both;
  overflow: hidden;
  border:2px solid black;
  border-radius: 5px;
/*HERE PLACE DEFAULT SIZE FOR THE TEXTAREA*/
  width: 50%;
  height: 250px;
}
ENDS CSS3

НАДЕЖДА ЭТО ПОМОЩЬ T04435

Ответ 6

Наконец, я это сделал. Вы можете обернуть textarea элементом (например, span) и т.д. См. мое демо. Я не использовал javascript или jquery. Для сложной части я использую указатели-события, которые поддерживаются большинством браузеров.

Ответ 7

попробуйте это, но его funny, включает draggin и div,

Код HTML

 <div id="d2" class="ui-widget-content" contenteditable>
        I look like textarea :)
    </div>

css Code

#d2{
-moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;  
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
    width: 300px;
    height: 200px;
}

Код jquery

$(function() {
    $( "#d2" ).draggable({revert: function(obj){
            if (obj === true) {
            // success

            return false;
        }
        else {
            // reverting
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;


            $("#d2").css("width", $("#d2").width()+xPos);
            $("#d2").css("height", $("#d2").height()+yPos ); 

            return true;
        }
    }});

    });

выше код может делать то, что вы хотите, но с разным вкусом просто перетащите, чтобы увеличить textarea (здесь div) для изменения размера.

ссылка jsfiddle