zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Checkboxen stylen - Wie spreche ich nur bestimmte in einen Container befindlichen an?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.12.2018, 11:00
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard Checkboxen stylen - Wie spreche ich nur bestimmte in einen Container befindlichen an?

Morgen,

ich möchte meine Checkboxen stylen. Mir ist prinzipiell klar ,wie ich das zu tun habe:

Wunderbare Checkboxen

Allerdings möchte ich nur die Checkboxen ansprechen, welche sich in einem speziellen Container (left3) befinden!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.12.2018, 11:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.931
cloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblick
Standard

dann kannst du mitels .left3 .deinewunschklasse {} nur Elemente ansprechen die sich in dem Container mit der Klasse left3 befinden.
__________________
Zitat: "offenbar" bedeutet, dass ich nicht sicher bin, wie Du etwas meinst - Ein User hier auf diesem Forum 😂
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.12.2018, 11:07
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

Macht er nicht!

HTML-Code:
.left3 {
	border: 1px solid black;
	margin-top: 5px;
	padding: 5px;
}

.left3 .input[type=checkbox] { opacity: 0; }

.left3 .input[type=checkbox] + label:before {
  width: 17px;
  height: 17px;
  display: inline-block;
  position: absolute;
  content: "";
  border: 1px solid black;
  background: white;
}
Sind noch die alten Standart -Checkboxen!
Mit Zitat antworten
  #4 (permalink)  
Alt 21.12.2018, 12:12
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 142
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

mach mal die Punkte vor den Input weg weil du sprichst ein Element an und nicht eine Klasse.

Notfalls kuck nochmal in mein Codepen rein , da habe ich gerade eine checkbox mit eingebaut

Geändert von basti1012 (21.12.2018 um 12:32 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 21.12.2018, 12:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.931
cloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblick
Standard

"Macht er nicht" ist keine Fehlermeldung.

CSS ohne HTML ist auch sinnlos, da braucht es beides um das sinnvoll zu beurteilen.

So kann man nur sagen: Hat dein <input> auch die Klasse input? Weil du sprichst nicht input-Elemente an sondern alle Elemente (egal ob div, etc.) welche die Klasse input haben.
__________________
Zitat: "offenbar" bedeutet, dass ich nicht sicher bin, wie Du etwas meinst - Ein User hier auf diesem Forum 😂
Mit Zitat antworten
  #6 (permalink)  
Alt 21.12.2018, 14:41
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

Habe jetzt die nachfolgende Lösung:

HTML-Code:
<!DOCTYPE HTML>
<html lang="de">
  <head>
    <title>Test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
      * {
	margin: 0;
	padding: 0;
	font-family: monospace;
}

main{
  display:flex;							
	border: 1px solid red;
	padding: 5px;
  height:calc(100vh - 70px);/*Minus header*/
}
      
      
      
      
.flex-container-navigation {
	 display: flex;		
    flex-direction: row;
    align-content:space-around;
}
      #oben{
        height:20vh;
      }
      
           
      
      #mitte{
        display:flex;
        flex:1 auto;
      }
      #left{
 flex:1 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
      }
      #left>span{
        flex:1 0 auto;
        text-align:center;
      }
      #rechts{
            flex: 1 auto;
      }
.mitte{
          display:flex;
        flex: 1 0 auto;
        align-self: stretch;
  font-family: Coolvetica; 
  font-weight: bold; 
  flex:1;
  font-size:1rem;
}
#last{
  background:url('http://www.animatedimages.org/data/media/35/animated-eye-image-0024.gif');
        display:block;
    width:100%;
  height:100%;
border:none;
  background-position:center;
  background-repeat:no-repeat;
background-size:60% 180%;
  font-weight:bolder;
    text-align:center;
  font-size:3em;
color:rgba(255,0,0,0.3)
}
    
      
      
      



.left-container {
	display:flex;	
	flex-direction: column;			 
 	flex-basis: auto;		
}
.left1 {
	background:#aaa;
}
.dropdown span{
    display:flex;
    flex-direction:column;
    margin-top:-100%;
}
.left2{
  padding: 5px;
  flex: 1;
  overflow:auto;
  height:calc(100% - 12px);/*Minus padding und border*/
}
.left2> span{
  height:auto;
  display:flex;
  flex-direction:column;
}
.left2>span button,.left1 span>button{
  cursor:pointer;
  height:30px;
  border:none;
	background: none;
 text-align:left;
}

.left3 {
	 background: #AA00CC;
}
.right-container {
	display:flex;	
	flex-direction: column;					
  flex:1;	
}
.right1 {								
	background: #AAAA00;
	flex: 1;	
}
.right2 {						
	background: #AAAAEE;
	flex: 1;	
}
.right3 {					
	background: #AAAAFF;
	flex: 1;	
}
.dropdown > input[type="checkbox"] {
  position: absolute;
  left: -100vw;		
}
.dropdown > label{
   display:block;
   padding: 5px;
}
.dropdown > label:after {
   content: ">>>>";		
  float:right;
}
.dropdown:hover   span{
    margin-top:0%;
}
button:hover,span button:hover,#last:hover{
	background: lightblue;
}


  
      
      

@media (max-width:570px){
 .flex-container-navigation{
    background:red;
   flex-direction:column;
  }
  
 main{
   flex-direction:column;
}
  main>*{
    height:200px;
  }
}

      
.right-container div,.left-container div{
  border:1px solid black;
}

main .left3 input[type=checkbox] { opacity: 0; }

main .left3 input[type=checkbox] + label:before {
  display: inline-block;
  position: relative;
  content: "\2716";
  border: 1px solid black;
  background-color: white;
  color: white;
  padding: 0px 4px 0px 4px;
  left: -10px;
  margin-bottom: 5px;
}


main .left3 input[type=checkbox] + label:after {
  display: inline-block;
  position: absolute;
}

main .left3 input[type=checkbox]:checked + label:before {
  background: white;
  border: 1px solid black;
  content: "\2716";
  color: black;
}
      



    </style>
</head>
<body>
<form target="_self" action="#" method="post">
<div id="oben" class="flex-container-navigation">
  
  <div id="left"><span>
    headline</span>
  </div>
  <div id="mitte" class="headline">
<button class="mitte" type="submit" name="headline">1</button>
 <button class="mitte" type="submit" name="headline">2</button>
   <button class="mitte" type="submit" name="headline">3</button>
 <button class="mitte" type="submit" name="headline">
					4</button>
<button class="mitte" type="submit" name="headline">
					5
				</button>
        				<button class="mitte" type="submit" name="headline">
					6
				</button>
        				<button class="mitte" type="submit" name="headline">
					7

        		</button>
</div>
      <div id="rechts">
<button id="last" type="submit" name="headline">
					letzter</button>   
      </div>
		</div>
  
  
  
 <main>
			<aside class="left-container">
				<div class="left1"> 
					<div class="dropdown">
					  <input type="checkbox" id="my-dropdown" name="my-checkbox">
					  <label for="my-dropdown" data-toggle="dropdown"> Alle anzeigen </label>
					  <span>
	<button type="submit" class="b1">
								file1
		</button>

	<button type="submit" class="b1">
								file2
		</button>
						
					
	<button type="submit" class="b1">
								längerals die anderen bla boa der der
		</button>
			
					  </span>
					</div>				
				</div>
				<div class="left2"> 
	<span>							<button type="submit" name="b2">text1</button>
								<button type="submit" name="b2">text2</button>
								<button type="submit" name="b2">text3</button>
		<button type="submit" name="b2">text4</button>
						 
              
   								<button type="submit" name="b2">text1</button>
								<button type="submit" name="b2">text2</button>
								<button type="submit" name="b2">text3</button>
								<button type="submit" name="b2">text4</button>
				          
              
      								<button type="submit" name="b2">text1</button>
								<button type="submit" name="b2">text2</button>
								<button type="submit" name="b2">text3</button>
								<button type="submit" name="b2">text4</button>
				        
              
      								<button type="submit" name="b2">text1</button>
								<button type="submit" name="b2">text2</button>
								<button type="submit" name="b2">text3</button>
														
 
						</span>
		 
				</div>
				<div class="left3">
          <input id="html" type="checkbox" name="type[]" checked="checked"><label for="html">HTML</label><br><br>
          
          <label>
  <input type='checkbox'>
  <span></span>
  Test eintrag
  </label>
        </div>
			</aside>
   
   
			<aside class="right-container">
				<div class="right1"> right1</div>
				<div class="right2"> right2 </div>
				<div class="right3"> right3 </div>
			</aside>
  </main>
</form>
<script>
  
 $(document).ready(function(){
     t=$('#left>span').html()
   go(t);
$(window).resize(function(){
go(t)
});
   
   function go(t){
     var h=$('#mitte').height();
  var h1=h;
    $('#left').html('')
  if(h>30){
    h=h*2;
    normal=100+h;
  }else{
      h=h*2;
    normal=100+h/2;
  
  }
      $('#left,.mitte,#last').css('font-size',normal+'%')
$('#left').html(t+','+h1+','+normal+'%');
  
  
  

   }
   
   
 });
  </script>
</body>
</html>
Finde ich schöner, da ich die Schriftgröße nicht anpassen muss sondern diese sich selber skaliert!
Spricht irgendetwas gegen diese Lösung???

Kann ich das "x" in der Checkbox ein wenig größer machen, ohne dass die Checkbox dabei größer wird?
Mit Zitat antworten
  #7 (permalink)  
Alt 21.12.2018, 14:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

EDIT: Doppelter Link
Mit Zitat antworten
  #8 (permalink)  
Alt 21.12.2018, 16:03
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 142
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
"Macht er nicht" ist keine Fehlermeldung.

CSS ohne HTML ist auch sinnlos, da braucht es beides um das sinnvoll zu beurteilen.

So kann man nur sagen: Hat dein <input> auch die Klasse input? Weil du sprichst nicht input-Elemente an sondern alle Elemente (egal ob div, etc.) welche die Klasse input haben.
Gut ohne das Html zu kennen wahr das auch nur nee vermutung. Aber da ich davon ausgehe das einer nicht den Element Name als Klasse nimmt sollte das dann richtig sein.

Möglich ist es aber trotzdem da hast du schon recht, aber schön wäre es meiner meinung trotzdem nicht.

Jetzt wo man sein Html kennt , hatte ich ja Gott sei dank richtig gelegen.

Werde aber in Zukunft meine Antwort anders Formulieren wenn das Html nicht bekannt ist


Dein X in der Mitte solltest du mit font-size größer bekommen.Bis zu einer gewissen Größe geht das wohl ohne das die Checkbox größer wird . Aber ab einer gewissen größe wächst die mit und dann mußt du notfalls die Box kleiner machen oder wenniger padding benutzen bis dein Endergebniss stimmt
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Anfängerfrage: Zentrierung in Galerie und Border-Problem goldbeere CSS 3 04.11.2013 20:07
bestimmte container drucken (verschachtelt) ENDORSER_ALL CSS 1 17.06.2011 16:19
Positionierung von Container horizontal mayhemtl CSS 9 11.08.2007 16:25
Container nimmt nicht die Höhe seines Inhalts an Lestat CSS 10 04.08.2005 14:47
Mitwachsende DIV Container Myjestic CSS 9 27.07.2005 18:37


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:56 Uhr.