Beispiel:HTML-Universalattribute-contenteditable.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE HTML>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>contenteditable</title>
    <style>
[contenteditable] { 
  padding: 1em; 
  padding-left: 3em;
  margin: 1em;
  outline: medium dashed #CCC; 
  position: relative;
}

[contenteditable]:after {
  position: absolute;
  content:'✏';
  left: 0em;
  top: 0em;
  font-size: 3em;
  transform: rotate(45deg);
} 

[contenteditable]:hover { 
  outline: 2px dashed #c82f04; 
}
table, th,td {
  border: thin solid;
  border-collapse: collapse;
}  
th {
  width: 10em;
  text-align-center;	
}
</style>
</head>

<body>
<h1>Contenteditable</h1>
<div contenteditable>

<p>Alles innerhalb dieses divs kann angeklickt und verändert werden. Viel Spaß!</p>
<p>
  <img src="//wiki.selfhtml.org/images/3/31/Hund.gif" alt="Hund mit Halsband und gefletschten Zähnen.">
</p>  
<table>
  <tr>
    <th>Spalte 1</th><th>Spalte 2</th>
  </tr>
  <tr>
    <td></td><td></td>
  </tr>
  <tr>
    <td>&nbsp;  </td><td>&nbsp;  </td>
  </tr>
  <tr>
    <td></td><td><input type="number"></td>
  </tr>      
 </table> 
 
</div>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:HTML-Universalattribute-contenteditable.html&oldid=99440“