Question

如何从textarea中删除右下角点？

有一个以下css resize:none的解决方案，但我不想删除调整大小...

所以有可能......

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

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

Answer 3

使用jQuery这是可能的，我发现了一个jQuery UI here

使用此源代码，您可以自定义textarea

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

Answer 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/

更新（基于评论）：

这个答案只是一个需要考虑的概念。示例代码旨在说明概念，而不是最终解决方案。

Answer 5

您好吗 HERE 是我答案的一个有效例子：

首先要指出这是基于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

Answer 6

最后，我做到了。您可以使用元素包含textarea（例如span）等等。请参阅my demo。我没有使用任何javascript或jquery，对于棘手的部分我使用most browser支持的指针事件。

Answer 7

试试这个，但其funny，涉及draggin和div，

HTML代码

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

css代码

#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 link

从textarea中删除点标记

7 个答案: