• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Suche Möglichkeit acht Wörter in drei Sprachen zu übersetzen

Sempervivum schrieb:
Das tut mir Leid, ich dachte, weil es keine Funktion hat, nehme ich es heraus. Ich habe jedenfalls im Javascript nichts gefunden, was sich auf dieses Dropdown-Menü bzw. Select bezieht.


Auch das ist bedauerlich. Ich kann es mir nur so erklären, dass durch die Änderungen, als ich die Strukturfehler im HTML korrigiert habe, das CSS nicht passt. Damit Du nicht von vorn anfangen musst, poste auch das aktuelle CSS. Sind sicher nur Kleinigkeiten.
Zum Vergrößern anklicken....
Es warn net bös gemeint! Bei mir hatte es jedenfalls funktioniert (bis auf die Drei begriffe)
CSS: 
  select {
            border: none;
            padding: 8px 20px;
            border-radius: 5px;
            background: #021d49;
            font-size: 13pt;
            color: #fff;
          }

          select:focus {
            outline: none;
          }
HTML: 
 <label>
            <label for="language">Language:</label>
            <select name="language" id="language">
              <option value="EN">EN</option>
              <option value="DE">DE</option>
              <option value="PL">PL</option>
            </select>
 
Werbung:
Ich meinte mehr das übrige CSS für die Gestaltung des gesamten Formulars. Das Styling der Eingabefelder und der Buttons muss ja wieder her gestellt werden. Poste am besten dein vollständiges CSS.
 
Sorry, den Teil wollte ich ihnen eigentlich nett antun!!
Hinweis die Trennlinien habe ich für mich eingerichtet, um die einzelnen Anweisungen unterscheiden zu können. Sollte dies nett korrekt sein, dann verzeihen Sie mir bitte
Code: 
<DOCTYPE html>
  <HTML LANG="DE">
    <html>

      <head>
        <base target="_top">
        </script>
        <style>
          body {
            background: #021d49;
            background-sitze: 10px;
            font-family: Arial, Arial;
            color: #e6e9f1;
            font-size: 13pt;
            margin: 20px;
            padding: 1px;
          }

          label {
            font-weight: bold;
            text-transform: uppercase;
          }

          input[type="search"] {
            width: 260px;
            padding: 10px;
            height: 50px;
            margin-bottom: 13px;
            border: 1px outset #FF0000;
            border-radius: 7px;
            font-size: 14pt;
            box-sizing: border-box;
          }

          input[type="button"] {
            display: block;
            margin: 10px auto;
            cursor: pointer;
            width: 100px;
            padding: 15px;
            background-color: #FF0000;
            color: white;
            text-transform: uppercase;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            border: 1px solid #FF0000;
            border-radius: 7px;
            transition: background 0.2s ease-out;
            flex: left;
        
          }

          input[type="button1"]:hover {
            background-color: #19911b;
          }

          input[type="button"]:hover {
            background-color: #19911b;
          }

          //-------Flex Box Eigenschaften:-------------------------------------------------------------------------------------------
          #container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            height: 80px;
            margin: 1 auto;
            width: 100%;
          }

          .box1 {
            width: 10.5%;
          }

          .box2 {
            width: 50.3%;
          }

          //---------ON/OFF_Button: --------------------------------------------------------------------------------------------------
          .onoffswitch {
            position: relative;
            width: 72px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
          }

          .onoffswitch-checkbox {
            position: absolute;
            opacity: 0;
            pointer-events: none;
          }

          .onoffswitch-label {
            display: block;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid #999999;
            border-radius: 20px;
          }

          .onoffswitch-inner {
            display: block;
            width: 200%;
            margin-left: -100%;
            transition: margin 0.3s ease-in 0s;
          }

          .onoffswitch-inner:before,
          .onoffswitch-inner:after {
            display: block;
            float: left;
            width: 50%;
            height: 20px;
            padding: 0;
            line-height: 20px;
            font-size: 15px;
            color: white;
            font-family: Trebuchet, Arial, sans-serif;
            font-weight: bold;
            box-sizing: border-box;
          }

          .onoffswitch-inner:before {
            content: "ON";
            padding-left: 10px;
            background-color: #34C264;
            color: #FFFFFF;
          }

          .onoffswitch-inner:after {
            content: "OFF";
            padding-right: 10px;
            background-color: #F51818;
            color: #F7F7F7;
            text-align: right;
          }

          .onoffswitch-switch {
            display: block;
            width: 13px;
            margin: 3.5px;
            background: #FFFFFF;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 48px;
            border: 2px solid #999999;
            border-radius: 20px;
            transition: all 0.3s ease-in 0s;
          }

          .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
            margin-left: 0;
          }

          .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
            right: 0px;
          }

          //-------Dropdown-Menüs(Übersetzungs ausfahl):--------------------------------------------------------------------
          select {
            border: none;
            padding: 8px 20px;
            border-radius: 5px;
            background: #021d49;
            font-size: 13pt;
            color: #fff;
          }

          select:focus {
            outline: none;
          }
.
 
Werbung:
Da waren einige Fehler drin, sowohl im HTML als auch im CSS. Damit Du verstehst was ich gemacht habe, habe ich es im Code kommentiert.
Code: 
<!DOCTYPE html> <!-- Hier fehlte das Ausrufezeichen -->
<HTML LANG="DE">
<!-- <html> --> <!-- ist doppelt -->

<head>
    <base target="_top">
    <!-- </script> --> <!-- Gehört hier nicht hin -->
    <style>
        body {
            background: #021d49;
            /* Schreibfehler: */
            /* background-sitze: 10px; */
            background-size: 10px;
            font-family: Arial, Arial;
            color: #e6e9f1;
            font-size: 13pt;
            margin: 20px;
            padding: 1px;
        }

        label {
            font-weight: bold;
            text-transform: uppercase;
        }

        input[type="search"] {
            width: 260px;
            padding: 10px;
            height: 50px;
            margin-bottom: 13px;
            border: 1px outset #FF0000;
            border-radius: 7px;
            font-size: 14pt;
            box-sizing: border-box;
        }

        input[type="button"] {
            display: block;
            margin: 10px auto;
            cursor: pointer;
            width: 100px;
            padding: 15px;
            background-color: #FF0000;
            color: white;
            text-transform: uppercase;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            border: 1px solid #FF0000;
            border-radius: 7px;
            transition: background 0.2s ease-out;
            flex: left;
        }

        input[type="button1"]:hover {
            background-color: #19911b;
        }

        input[type="button"]:hover {
            background-color: #19911b;
        }

        /* Falsche Kommentarzeichen:
            /* //-------Flex Box Eigenschaften:------------------------------------------------------------------------------------------- #container { display: flex; flex-direction: row; justify-content: space-between; height: 80px; margin: 1 auto; width: 100%; } .box1 { width: 10.5%; } .box2 { width: 50.3%; } //---------ON/OFF_Button: -------------------------------------------------------------------------------------------------- .onoffswitch { position: relative; width: 72px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .onoffswitch-checkbox { position: absolute; opacity: 0; pointer-events: none; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 20px; } .onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner:before, .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 20px; padding: 0; line-height: 20px; font-size: 15px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; } .onoffswitch-inner:before { content: "ON"; padding-left: 10px; background-color: #34C264; color: #FFFFFF; } .onoffswitch-inner:after { content: "OFF"; padding-right: 10px; background-color: #F51818; color: #F7F7F7; text-align: right; } .onoffswitch-switch { display: block; width: 13px; margin: 3.5px; background: #FFFFFF; position: absolute; top: 0; bottom: 0; right: 48px; border: 2px solid #999999; border-radius: 20px; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner { margin-left: 0; } .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch { right: 0px; } //-------Dropdown-Menüs(Übersetzungs ausfahl):-------------------------------------------------------------------- select { border: none; padding: 8px 20px; border-radius: 5px; background: #021d49; font-size: 13pt; color: #fff; } select:focus { outline: none; } */

        /* Ich kann keinen Container mit dieser ID finden,
        ich nehme an, hier ist das div
         mit der Klasse flex-container gemeint: */
        .flex-container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            height: 80px;
            margin: 1 auto;
            width: 100%;
        }

        .box1 {
            width: 10.5%;
        }

        .box2 {
            width: 50.3%;
        }

        /* //---------ON/OFF_Button: -------------------------------------------------------------------------------------------------- */
        .onoffswitch {
            position: relative;
            width: 72px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        .onoffswitch-checkbox {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .onoffswitch-label {
            display: block;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid #999999;
            border-radius: 20px;
        }

        .onoffswitch-inner {
            display: block;
            width: 200%;
            margin-left: -100%;
            transition: margin 0.3s ease-in 0s;
        }

        .onoffswitch-inner:before,
        .onoffswitch-inner:after {
            display: block;
            float: left;
            width: 50%;
            height: 20px;
            padding: 0;
            line-height: 20px;
            font-size: 15px;
            color: white;
            font-family: Trebuchet, Arial, sans-serif;
            font-weight: bold;
            box-sizing: border-box;
        }

        .onoffswitch-inner:before {
            content: "ON";
            padding-left: 10px;
            background-color: #34C264;
            color: #FFFFFF;
        }

        .onoffswitch-inner:after {
            content: "OFF";
            padding-right: 10px;
            background-color: #F51818;
            color: #F7F7F7;
            text-align: right;
        }

        .onoffswitch-switch {
            display: block;
            width: 13px;
            margin: 3.5px;
            background: #FFFFFF;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 48px;
            border: 2px solid #999999;
            border-radius: 20px;
            transition: all 0.3s ease-in 0s;
        }

        .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
            margin-left: 0;
        }

        .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
            right: 0px;
        }

        /* //-------Dropdown-Menüs(Übersetzungs ausfahl):-------------------------------------------------------------------- */
        select {
            border: none;
            padding: 8px 20px;
            border-radius: 5px;
            background: #021d49;
            font-size: 13pt;
            color: #fff;
        }

        select:focus {
            outline: none;
        }
    </style>

    <style>
        ::-ms-input-placeholder {
            /* Edge 12-18 */
            color: #e30613;
        }

        ::placeholder {
            color: #e30613;
        }

        input:focus::placeholder {
            color: transparent;
        }
    </style>
</head>

<body>
 
Sempervivum schrieb:
Da waren einige Fehler drin, sowohl im HTML als auch im CSS. Damit Du verstehst was ich gemacht habe, habe ich es im Code kommentiert.
Code: 
<!DOCTYPE html> <!-- Hier fehlte das Ausrufezeichen -->
<HTML LANG="DE">
<!-- <html> --> <!-- ist doppelt -->

<head>
    <base target="_top">
    <!-- </script> --> <!-- Gehört hier nicht hin -->
    <style>
        body {
            background: #021d49;
            /* Schreibfehler: */
            /* background-sitze: 10px; */
            background-size: 10px;
            font-family: Arial, Arial;
            color: #e6e9f1;
            font-size: 13pt;
            margin: 20px;
            padding: 1px;
        }

        label {
            font-weight: bold;
            text-transform: uppercase;
        }

        input[type="search"] {
            width: 260px;
            padding: 10px;
            height: 50px;
            margin-bottom: 13px;
            border: 1px outset #FF0000;
            border-radius: 7px;
            font-size: 14pt;
            box-sizing: border-box;
        }

        input[type="button"] {
            display: block;
            margin: 10px auto;
            cursor: pointer;
            width: 100px;
            padding: 15px;
            background-color: #FF0000;
            color: white;
            text-transform: uppercase;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            border: 1px solid #FF0000;
            border-radius: 7px;
            transition: background 0.2s ease-out;
            flex: left;
        }

        input[type="button1"]:hover {
            background-color: #19911b;
        }

        input[type="button"]:hover {
            background-color: #19911b;
        }

        /* Falsche Kommentarzeichen:
            /* //-------Flex Box Eigenschaften:------------------------------------------------------------------------------------------- #container { display: flex; flex-direction: row; justify-content: space-between; height: 80px; margin: 1 auto; width: 100%; } .box1 { width: 10.5%; } .box2 { width: 50.3%; } //---------ON/OFF_Button: -------------------------------------------------------------------------------------------------- .onoffswitch { position: relative; width: 72px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .onoffswitch-checkbox { position: absolute; opacity: 0; pointer-events: none; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 20px; } .onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner:before, .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 20px; padding: 0; line-height: 20px; font-size: 15px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; } .onoffswitch-inner:before { content: "ON"; padding-left: 10px; background-color: #34C264; color: #FFFFFF; } .onoffswitch-inner:after { content: "OFF"; padding-right: 10px; background-color: #F51818; color: #F7F7F7; text-align: right; } .onoffswitch-switch { display: block; width: 13px; margin: 3.5px; background: #FFFFFF; position: absolute; top: 0; bottom: 0; right: 48px; border: 2px solid #999999; border-radius: 20px; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner { margin-left: 0; } .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch { right: 0px; } //-------Dropdown-Menüs(Übersetzungs ausfahl):-------------------------------------------------------------------- select { border: none; padding: 8px 20px; border-radius: 5px; background: #021d49; font-size: 13pt; color: #fff; } select:focus { outline: none; } */

        /* Ich kann keinen Container mit dieser ID finden,
        ich nehme an, hier ist das div
         mit der Klasse flex-container gemeint: */
        .flex-container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            height: 80px;
            margin: 1 auto;
            width: 100%;
        }

        .box1 {
            width: 10.5%;
        }

        .box2 {
            width: 50.3%;
        }

        /* //---------ON/OFF_Button: -------------------------------------------------------------------------------------------------- */
        .onoffswitch {
            position: relative;
            width: 72px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        .onoffswitch-checkbox {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .onoffswitch-label {
            display: block;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid #999999;
            border-radius: 20px;
        }

        .onoffswitch-inner {
            display: block;
            width: 200%;
            margin-left: -100%;
            transition: margin 0.3s ease-in 0s;
        }

        .onoffswitch-inner:before,
        .onoffswitch-inner:after {
            display: block;
            float: left;
            width: 50%;
            height: 20px;
            padding: 0;
            line-height: 20px;
            font-size: 15px;
            color: white;
            font-family: Trebuchet, Arial, sans-serif;
            font-weight: bold;
            box-sizing: border-box;
        }

        .onoffswitch-inner:before {
            content: "ON";
            padding-left: 10px;
            background-color: #34C264;
            color: #FFFFFF;
        }

        .onoffswitch-inner:after {
            content: "OFF";
            padding-right: 10px;
            background-color: #F51818;
            color: #F7F7F7;
            text-align: right;
        }

        .onoffswitch-switch {
            display: block;
            width: 13px;
            margin: 3.5px;
            background: #FFFFFF;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 48px;
            border: 2px solid #999999;
            border-radius: 20px;
            transition: all 0.3s ease-in 0s;
        }

        .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
            margin-left: 0;
        }

        .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
            right: 0px;
        }

        /* //-------Dropdown-Menüs(Übersetzungs ausfahl):-------------------------------------------------------------------- */
        select {
            border: none;
            padding: 8px 20px;
            border-radius: 5px;
            background: #021d49;
            font-size: 13pt;
            color: #fff;
        }

        select:focus {
            outline: none;
        }
    </style>

    <style>
        ::-ms-input-placeholder {
            /* Edge 12-18 */
            color: #e30613;
        }

        ::placeholder {
            color: #e30613;
        }

        input:focus::placeholder {
            color: transparent;
        }
    </style>
</head>

<body>
Zum Vergrößern anklicken....
Ja Asche auf mein Haupt, diesen Teil habe ich stiefmütterlich behandelt
 
Werbung:
tk1234 schrieb:
Nein! Damit wird es unmöglich das Formular per Tastatur zu bedienen da nicht erkennbar ist wenn das Element den Fokus hat - outline:none darfst du nur verwenden wenn anderweitig sichergestellt wird dass ein Fokus erkennbar ist!
Zum Vergrößern anklicken....
Ah gut zu wissen, wen ich das richtig verstehe! Aber das ist eh nicht möglich, da ich die Buttons nicht mit den Tastaturevents belegt habe wie z. B., Enter Taste (Eingabetaste)
aber das ist eine Idee für irgendwann mal.
 
Die ENTER Taste auf einem Button, der den Fokus hat, löst das click-Event aus. Bitte schmeiße den outline-Rahmen um das :focus-Element nicht weg. Solange Du die Seite mit der Maus bedienst, erzeugt der Browser nur um Texteingabefelder den Fokusrahmen.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben