Ankündigung

Einklappen
Keine Ankündigung bisher.

getrennte layouts für input boxen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • getrennte layouts für input boxen

    ich habe bei meinem stylesheet eine allgemeine definition der formularelemente. leider wird mir jetzt auch bei allen checkboxen ein roter rand RUND UM die checkbox angezeigt?!
    Code:
     input, textarea, select, option {
    	font-family : Arial, Verdana, Geneva, Helvetica, sans-serif;
    	font-size : 10px;
    	font-weight : normal;
    	color : #0000ff;
    	BORDER-LEFT: 1px solid #000000;
    	BORDER-RIGHT: 1px solid #000000;
    	BORDER-TOP: 1px solid #000000;
    	BORDER-BOTTOM: 1px solid #000000;
    	background-Color: #ff0000;
    }
    wo hab ich denn da meinen denkfehler? wo kommt der rote rand her, bzw. wie kann ich den wegbekommen?
    mfg Alex


  • #2
    Zitat von Promaetheus
    wo hab ich denn da meinen denkfehler?
    Du vergisst das Checkboxen (sowie Radio und buttons) auch Inputfelder sind.

    Erstelle eine Klasse und weise dieser den Checkboxen zu.

    Kommentar


    • #3
      danke erstmal für den tipp.
      leider funktioniert das aber IM INTERNET EXPLORER nicht. ich habe 4 verschiedene boxen:
      1 - allgemeine formularfelderdefinition <- funktioniert
      2 - inputfield OHNE rahmen <- funktioniert
      3 - inputfield und textarea bei error rot umrandet: <- funktioniert
      4 - checkbox field OHNE rahmen und farbe <- FUNKTIONIERT LEIDER NICHT.

      firefox: alles top (das war aber auch schon ohne die extra class so)
      internet explorer: die checkbox hat zwar keinen rahmen mehr ist aber noch umrandet mit einer farbe.

      siehe auch: http://aurea.cc/catalog/shopping_car...5d5ca7d4804107

      Code:
       input, textarea, select, option {
      	font-family : Arial, Verdana, Geneva, Helvetica, sans-serif;
      	font-size : 10px;
      	font-weight : normal;
      	color : #000000;
      	BORDER-LEFT: 1px solid #000000;
      	BORDER-RIGHT: 1px solid #000000;
      	BORDER-TOP: 1px solid #000000;
      	BORDER-BOTTOM: 1px solid #000000;
      	background-Color: #ffffff;
      }
      
      input.borderless {
          border-style: none;
      }
      
      input.error, textarea.error {
      	font-family : Arial, Verdana, Geneva, Helvetica, sans-serif;
      	font-size : 10px;
      	font-weight : normal;
      	color : #000000;
      	BORDER-LEFT: 2px solid #ff0000;
      	BORDER-RIGHT: 2px solid #ff0000;
      	BORDER-TOP: 2px solid #ff0000;
      	BORDER-BOTTOM: 2px solid #ff0000;
      	background-Color: #ffffff;
      }
      
      input.checkbox_borderless {
      	font-family : Arial, Verdana, Geneva, Helvetica, sans-serif;
      	font-size : 10px;
      	font-weight : normal;
         border-style: none;
      }
      mfg Alex

      Kommentar


      • #4
        Ich definiere per whitelist, nicht wie du per blacklist.

        textarea, button, input.text, option {
        // schriftstil
        }

        textarea, input.text {
        // eingabefelder
        }

        button, input.submit, input.button, input.reset {
        // buttons
        }

        // rest rafft eh keine Formatierung gescheit

        Kommentar


        • #5
          Ausserdem solltest du wissen, dass Formatierungen von Checkboxen, Radiobutton usw. sich in jedem Browser total unterscheiden.

          Leider gibt es scheinbar den Artikel bei css4you nicht mehr, in dem es anschaulich dargestellt wurde.

          Kommentar


          • #6
            hm... schade. habs jetzt zwar hinbekommen. aber wohl mehr aus zufall. ;o)

            danke auf jeden fall für eure tipps. ;o)
            mfg Alex

            Kommentar


            • #7
              Und wie?

              Kommentar


              • #8
                ich habe eine extra class für checkboxen angelegt und einfach die standard hintergrundfarbe eingegeben. auch habe ich eine separate class für die dropdownfelder angelegt.

                hintergrund: ich brauchte 3 verschiedene layouts für inputboxen:
                1-inputbox für login ohne rahmen
                2-inputbox standard mit schwarzem rahmen
                3-bei eingabefehler leuchtet die inputbox jetzt mit rotem rahmen auf.

                problem hierbei wiedermal der internetexplorer: ich habe eine extra class machen müssen für die dropdownboxen, welche einen roten hintergrund haben sollten, denn der internetexplorer macht nur einen dünnen roten rand um die dropdownbox, welchen man fast nicht sieht. man muss die class dann beim <select> UND beim <option>bitte auswählen</option> eingeben, sonst hat das feld keinen roten hintergrund. ;o)

                und so sieht das ganze jetzt aus:

                Code:
                 input, textarea, select, option {
                	font-family : Arial, Verdana, Geneva, Helvetica, sans-serif;
                	font-size : 12px;
                	font-weight : normal;
                	color : #000000;
                	BORDER-LEFT: 1px solid #000000;
                	BORDER-RIGHT: 1px solid #000000;
                	BORDER-TOP: 1px solid #000000;
                	BORDER-BOTTOM: 1px solid #000000;
                	background-Color: #ffffff;
                }
                
                input.borderless {
                  border-style: none;
                }
                
                input.error, textarea.error {
                	font-family : Arial, Verdana, Geneva, Helvetica, sans-serif;
                	font-size : 12px;
                	font-weight : normal;
                	color : #000000;
                	BORDER-LEFT: 2px solid #ff0000;
                	BORDER-RIGHT: 2px solid #ff0000;
                	BORDER-TOP: 2px solid #ff0000;
                	BORDER-BOTTOM: 2px solid #ff0000;
                	background-Color: #ffffff;
                }
                
                select.error, option.error {
                	font-family : Arial, Verdana, Geneva, Helvetica, sans-serif;
                	font-size : 12px;
                	font-weight : normal;
                	color : 000000;
                	BORDER-LEFT: 0px solid #ff0000;
                	BORDER-RIGHT: 0px solid #ff0000;
                	BORDER-TOP: 0px solid #ff0000;
                	BORDER-BOTTOM: 0px solid #ff0000;
                	background-color: ff0000;
                }
                
                input.checkbox_borderless {
                	font-family : Arial, Verdana, Geneva, Helvetica, sans-serif;
                	font-size : 12px;
                	font-weight : normal;
                      border-style: none;
                	background-Color: #EBEBEB;
                }
                mfg Alex

                Kommentar

                Lädt...
                X