Beiträge von Somba

Somba

Hallo Sempervivum,

IE wird leider noch Überwiegend genutz, damit fällt der Befehle :focus-within leider weg.

Ich habe ihn aber trotzdem getestet und er hat auch nicht den gewünchten effekt erziehlt.

Zitat

PS: Da fehlt ein schließendes </div>

Da hab ich wohl zu viel wegenommen von meiner testArea

Zitat

PPS: Ein (unschöner) Workaround könnte sein, das Input und die Checkbox aus dem Focus-Element herauszunehm ..

Beim Attribute type=checkbox wird der Focus mit übernohmen da bleibt das Fenster offen.

nur beim Attribute type=text verliere ich den Focus und beide stammen vom Tag input.

Zitat

wieder mit einem negativen Margin darüber zu positionieren.

da würde ich aber auch den Focus verlieren.

Ich habe jetzt noch dieses als Bedingung gesetzt " .test > input:focus " hat aber nur zu einen Teilerfolg geführt

man muss die Maus gedrückt halten auf den input.text dann bleibt das Fenster geöffnet bis man die Maus los läst

dann geht wieder alles zu

Da bleibt wohl nur das gute alte Javascript übrig um das Problem zu lösen.

Ein paar Ressourcen habe ich noch dafür

Grüße

Somba

Hallo,

ich komme an diesem Punkt irgend wie nicht weiter vieleicht hat ja jemand eine Idee ( Bitte nur CSS )

HTML

<html>
    <head>
    <style>
    
    
      .table 
      { 
          display: table; 
          border-collapse:collapse; 
      }
      
      .tr
      { 
          
           display:table-row; 
       }
    
       .td 
       { 
           display:table-cell; 
       }

    
       .test 
       {      
              background-color:#f7f7f7;
              top:0px;
              left:0px;
              width:180px;
              height:35px;
              -webkit-transition: all 3s ease;
       }
    
       .test:focus, .test:active 
       {
             background-color:#454545;
             height:200px;
             width:800px;
             border-radius:5px;
             
       }

    </style>
   <head>
<body>
<center>
  <div class="table" style="position:relative;width:80%;">
    <div class="tr">
           <div class="td test"  style="position:absolute;top:0px;left:20px;"  tabindex="0">
                    <div> Test Test Test</div>
                    <div> Test Test Test</div>
                    <div><input type="checkbox"></div>
                    <div><input type="text"></div> 
         </div>
   </div>
 </center>
</body>
</html>

Alles anzeigen

sobald ich auf

Code

<input type="text">

klicke geht das Fenster wieder zu weil der Focus verlohren geht.

Alle anderen Funktionieren und der Focus bleibt erhalten.

Danke

Grüße

Beiträge von Somba

CSS :focus bei Auswahl geht verloren

CSS :focus bei Auswahl geht verloren