CODEWITHSUNDEEP
javascripthtml
Manoj
Manoj

Reputation: 57

change border of contenteditable div element when focus using javascript

I am using javascript for the editable div element.

 var div = document.getElementById('htmlelement');
 var ele = document.createElement('div');
 ele.setAttribute('id','inputelement');
 ele.style.display = 'inline-block';
 ele.style.border = 'none';
 ele.style.minHeight = '100px';
 ele.style.maxHeight = '100px;'
 ele.style.padding = '10px';
 ele.style.fontSize = '12px';
 ele.style.color = 'blue';
 ele.setAttribute('contentEditable','true');
 div.appendChild(ele);
 ele.focus();

Now after focus black border shows over the div area automatically. I want to remove and change that border color, but I think CSS will not work for this. because div element is dynamically created by javascript.

is any way to remove that black border or change that border color.

i am tryijng to use css but not working because of dynamic element creation like,

[contenteditable] {
   outline: 0px solid transparent;
}

Upvotes: 3

Views: 2011

Answers (1)

chrwahl
chrwahl

Reputation: 13070

When you talk about "border" you mean "outline"? You can just set it to none.

var div = document.getElementById('htmlelement');

var ele = document.createElement('div');
ele.id = 'inputelement';
ele.style.display = 'inline-block';
ele.style.border = 'none';
ele.style.minHeight = '100px';
ele.style.maxHeight = '100px;';
ele.style.padding = '10px';
ele.style.fontSize = '12px';
ele.style.color = 'blue';
ele.setAttribute('contentEditable', 'true');
div.appendChild(ele);
ele.focus();
div[contenteditable] {
  outline: none;
}
<div id="htmlelement"></div>

Upvotes: 3

Related Questions