How to Remove Resize handles and border of div with contentEditable and size style
The problem I'm having is with the contentEditable attribute in IE. The problem is that I'm getting resize handles, and a thick border around elements when they're in focus. The styles for with, height and display are needed. Any idea of how to remove them? CSS or Javascript
A simple example:
<html>
<head>
</head>
<body>
<div contentEditable="true" style="width: 50%; height: 50%; display: table" >
<div contentEditable="true"开发者_C百科 style="width: 50%; height: 50%; display: table-cell">
<p>aaa</p>
</div>
</div>
</body>
</html>
Do You need contentEditable="true" defined twice ? If You delete the first one, the resize handles go away, although the functionality remains.
http://jsfiddle.net/2uphD/1/
We can wrap the outer div with contenteditable value as false to take away the resize handles. Below the the updated jsfiddle
<div>
<div contentEditable="false" style="width:50%; height:50%; display:table" >
<div contentEditable="true" style="width:50%; height:50%; display:table-cell" >
<p>div1</p>
</div>
</div>
<div contentEditable="false" style="width:50%; height:50%; display:table" >
<div contentEditable="true" style="width:50%; height:50%; display:table-cell" >
<p>div2</p>
</div>
</div>You just should use resize: none for disable handlers:
<div
contenteditable
style="max-height:200px;resize: none">
</div>
And this style to disable border on focus:
<style>
[contenteditable]:focus {
outline: 0px solid transparent;
}
</style>
加载中,请稍侯......
精彩评论