CODEWITHSUNDEEP
htmlcontenteditablemouse-cursor
Use the fork Luke
Use the fork Luke

Reputation: 207

How to change cursor style for elements in editable div

I am trying to change the cursor to "pointer" for specific elements in content editable divs.

The below html code does not work as expected in Internet Explorer 8 and 9.
Any ideas how to set cursor style for elements in editable divs?

<div contenteditable="true">
    <img src="http://images3.wikia.nocookie.net/__cb20100430200315/fantendo/images/0/06/Foo.jpg" style="cursor:pointer"/>
</div>

Upvotes: 6

Views: 9681

Answers (3)

Bhautik Chudasama
Bhautik Chudasama

Reputation: 712

For the specific element that inner in div[contenteditable=true] change the cursor, you need to changes in your div element style. for example

/*

** I want to change a cursor for an image. You need to just specify cursor: pointer | auto | text; in your element style.

For happen we have used different types of selectors.

*/

  div[contenteditable=true]>img {
      cursor:pointer;
    }


div > img 
{
    cursor:wait;
  
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stackoverflow</title>
 </head>
<body>
 <div contenteditable="true">
    <img src="http://images3.wikia.nocookie.net/__cb20100430200315/fantendo/images/0/06/Foo.jpg" />
</div>
  <div>
  <img src="http://images3.wikia.nocookie.net/__cb20100430200315/fantendo/images/0/06/Foo.jpg" />
  </div>
    </body>
</html>

Upvotes: 0

handle
handle

Reputation: 6329

Here's an example of how to change the cursor for a contenteditable div (into a mouse/text caret similar to ꕯ to indicate that text editing and selection is possible).
The div also contains children a link elements which inherit this setting and so need to be explicitly set to the standard cursor.
(The example contains links to the documentation at MDN.)

#edit {
  width:25em;height:4em;
  background-color:#eee;
  border-radius:3px;
  padding:0.2em;
  margin:0.5em;
  
  resize: both;
  overflow: auto;
  
  cursor:text;
  }

#edit a {
  cursor:pointer;
}
<div id="edit" contenteditable>
Hi, my name is <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"><code>div</code></a> and I'm <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a>.<br/>
My <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor"><code>cursor</code></a> style is set to <code>text</code>.<br/>
I'm also <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/resize"><code>resizable</code></a> and I <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow"><code>scroll</code></a>!<br/>
So I'm almost like a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea"><code>textarea</code></a>.
</div>

Upvotes: 2

user1987371
user1987371

Reputation: 

          http://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

               http://www.marcato.org/luke/web/cursors.html
         http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_cursor

Changing the Mouse Pointer

When this page loads, the mouse pointer should change to a 'hand'. A custom cursor is defined by the "cursor:" style property CSS (cascading style sheets). The easiest way to change the cursor type is to add a style="cursor: crosshair" property within an HTML tag. e.g.

Text

The following links should change the pointer after being 'moused-over'. These show a number of built-in cursor styles that you can use:

auto

crosshair

default

pointer

help

move

text

wait

nw-resize

n-resize

ne-resize

w-resize

hand

e-resize

sw-resize

s-resize

se-resize

Some of the cursor styles may not work, depending on the browser. Custom Mouse Pointers

The following HTML code will display a custom cursor:

Text

A custom URI

The user agent (i.e. browser) must be able to handle the type of cursor. Some possible file types that may work are .cur, .csr and .ani files. The above example works in Internet Explorer for Windows, but not in Netscape or IE 5.0 for Unix.

Upvotes: -1

Related Questions