[Textfeld=background:#eeeeee;color:#383838;][Ueberschrift=background:#ffffff;color:#000000; padding:3px 10px;] [Good News] [/Ueberschrift]Smiley oder Grafik in der Überschrift! [/Textfeld] 
 

[Textfeld=background:#eeeeee;color:#383838; border:2px solid #383838;][Ueberschrift=background:#ffffff;color:#000000; border:5px double #777777;] Border-Style[/Ueberschrift] Textfeld und Überschrift werden mit speziellen Rahmen und Rändern versehen! [/Textfeld] 
 

[Textfeld=background:#eeeeee;color:#383838;][Ueberschrift=background:#ffffff;color:#000000; border:none;]Border-Style / Ohne Rahmen[/Ueberschrift]Die Überschrift oder auch das Textfeld kann ohne Rahmen angezeigt werden! [/Textfeld]
 

[Textfeld=background:#eeeeee;color:#383838;][Ueberschrift=background:#ffffff;color:#000000; text-align: center;]Position-Style / Zentriert[/Ueberschrift]Auch die Position der Überschrift lässt sich bestimmen! [/Textfeld]
 

[Textfeld=background:#eeeeee;color:#383838;][Ueberschrift=background:#ffffff;color:#000000; text-align:right;]Position-Style / Rechtsanschlag[/Ueberschrift]Die Position der Überschrift wird hier nach rechts verschoben! [/Textfeld]
 

[Textfeld=background:#eeeeee;color:#383838;][Ueberschrift=background:#ffffff; color:#000000; text-align: center; padding:3px 15px; ] Mehrzeilige Überschrift!
Sie sind selten, aber möglich![/Ueberschrift]Es besteht die Möglichkeit auch lange, mehrzeilige Überschriften anzuzeigen![/Textfeld] 
 

[Textfeld=background:#ffeeee;color:#383838;][Ueberschrift=background:#ffcccc;color:#000000; margin:auto;]Farben verändern[/Ueberschrift]Auch die vorgegebenen Farben unter "background" lassen sich verändern und anpassen! [/Textfeld]
 

<div onclick="xob_insert('[Textfeld=background:#eeeeee;color:#383838;][Ueberschrift=background:#eeeeee;color:#000000;]Überschrift[/Ueberschrift]Text Text','[/Textfeld]')" class="xob_icon_cont"><img alt="Textfeld" title="Neues Textfeld" class="xob_icon" src="https://files.homepagemodules.de/b214495/a_560_5a77b5dc.png"></div>
 

[Textfeld={{style}}]
...
[/Textfeld]
 

<fieldset class="textfeld" style="{{style}}">
...
</fieldset>
 

https://files.homepagemodules.de/b214495/a_560_5a77b5dc.png
 

[Ueberschrift={{form}}]
...
[/Ueberschrift]
 

<legend class="ueberschrift" style="{{form}}">
...
</legend>
 

https://files.homepagemodules.de/b214495/a_560_5a77b5dc.png
 

.textfeld {
  display:inline-block;
  margin:10px;
  scroll:auto !important;
  padding: 10px; 
  color: #383838; 
  background:#eeeeee;
  box-shadow:2px 2px 5px #aaaaaa;
  border-radius:5px; 
  border:1px solid #383838;
}
 
/* Nur Mobil - Abstand zum linken & rechten Rand */
@media all and (max-device-width: 865px){
  .textfeld {
    display:block;
    max-width: 100vw;
    margin:10px 0px; padding:10px !important;
  }
  .textfeld .textfeld {margin:10px 5px;
  }
}
.ueberschrift {
  width:auto;
  font:bold 14px Georgia, serif; 
  color:#000000; 
  background:#dddddd; 
  border-radius:9px; 
  border: 1px solid #383838; 
  padding:3px 10px 2px 10px; 
}
 

.close_schatten {
  display:inline-block;
  opacity:0;
  position:relative;
  bottom: 10px;
  padding: 11px 18px 11px 3px;
  margin-left:-32px; 
  vertical-align: bottom; 
  cursor: pointer;
  border: 1px solid #aaaaaa; 
  border-width:1px 0 0 1px;
  border-radius: 4px 0 4px 0;
}
 
.close_schatten:hover {
  opacity:1 !important;
  background: #cccccc;
  border: 1px solid #383838;
  border-width:1px 0 0 1px;
  --slash-deg: -180deg;
}
.close_schatten::before, .close_schatten::after {
  position: absolute;
  top: calc(50% - 1px);
  content: "";
  width: 14px;
  height: 4px;
  background-color: #aaaaaa;
  transform-origin: center center;
  transition: 500ms;
  border-radius: 5px;
  transform: rotate(var(--slash-deg, -45deg));
}
.close_schatten::after {
  transform: rotate(var(--slash-deg, 45deg));
}
.close_schatten:hover::after, .close_schatten:hover::before {
  background-color: #aa1111; 
}
.closeSch {
  display:none !important;
}
.closeOp {
  opacity:1 !important;
  border-width: 1px;
  border-radius:50%;
  padding-left:4px;
  margin:5px;
  top:0;
  left:5px;
  line-height:30px;
}
.closeOp:hover {  
  --slash-deg: -270deg;
  border: 1px solid #777777;
}
.closeOp::before {
  transform: rotate(var(--slash-deg, 90deg));
}
.closeOp::after {
  transform: rotate(0deg);
}
 

<script>
window.addEventListener('load', function(){
$('.textfeld').css({'padding-right':'25px','vertical-align':'bottom'}).after('<span class="close_schatten"></span>&nbsp;&nbsp;&nbsp;');
 
$('.textfeld').hover(function(){
  $(this).next().css('opacity','1').attr('title','Ein- und ausblenden!');
  // $(this).attr('title','Textfelder lassen sich durch das "X" Ein- und ausblenden!').next().css('opacity','1').attr('title','Ein- und ausblenden!');
}, function(){
  $(this).next().css('opacity','0');
});
 
$('a').hover(function(){
  $(this).closest('.textfeld').next().fadeOut(100);
}, function(){
  $('.textfeld a').closest('.textfeld').next().fadeIn();
});
 
$('.close_schatten').on('click',function(){
  $(this).prev().toggleClass('closeSch');
  $(this).toggleClass('closeOp');
});
 
});
</script>