Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Jqui Inputbox Hintergrund und Randfarbe ändern CSS

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Jqui Inputbox Hintergrund und Randfarbe ändern CSS

    This topic has been deleted. Only users with topic management privileges can see it.
    • michl75
      michl75 last edited by

      Guten Morgen,
      habe ein paar JQUI Inputboxen, aber die passen farblich 0 zu meinem Design.

      Die Hintergrundfarbe habe ich bereits mit CSS ändern können:

      .UiStyle .ui-button {
      background: #22252C !important;
      border-width: 0px;
      }
      

      Was mit aber nicht in den Sinn kommt, wie ich den Rand an der Inputbox selbst ändern kann:
      y2.PNG

      Ich meine hier den hellblauen Rand an der Box selbst.

      Wenn ich Rand, wie oben im Code versucht, zu ändern ... passiert aber nichts. Hat dieser (hellblaue) Rand eine eigene Bezeichnung ?

      Vg M.

      Glasfaser BananaJoe 2 Replies Last reply Reply Quote 0
      • Glasfaser
        Glasfaser @michl75 last edited by

        @michl75

        Hier sind ein paar CSS Anweisungen drin , vielleicht ist da was bei .
        Bin leider nicht Zuhause ... deshalb nur offline per Suche .

        https://forum.iobroker.net/topic/45770/toggle-button-beim-drauf-zeigen-blau-hinterlegt/23?lang=de

        1 Reply Last reply Reply Quote 0
        • BananaJoe
          BananaJoe Most Active @michl75 last edited by BananaJoe

          @michl75 ich habe das mal über die Widget-Nummer gelöst (Dann gelten die Anweisung explizit nur für dieses, nicht für alle)

          /* Inputfeld Alexa EinkaufslisteV3*/
          #w00250_input {
              /*text-shadow: 1px 1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, -1px -1px 0 #000000, 1px 0px 0 #000000, 0px 1px 0 #000000, -1px 0px 0 #000000, 0px -1px 0 #000000, 1px 1px 4px #000000, 0px 0px 2px #000000;*/
              background: rgb(255,255,255,0.8) ;
              color: #333333;
              padding-left: 10px;
              padding-top: 15px;
              border: 2px solid #000000;
              border-radius: 8px;
          }
          
          #w00250_set {
              background: rgb(0,0,0,0.6) ;
              border: 2px solid #000000;
              border-radius: 8px;
              color: #eeece1;
              text-shadow:1px 1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, -1px -1px 0 #000000, 1px 0px 0 #000000, 0px 1px 0 #000000, -1px 0px 0 #000000, 0px -1px 0 #000000, 1px 1px 4px #000000, 2px 2px 4px #000000;
              font-family: Oxanium;
              font-size: 30px;
          }
          

          w00250 ist in diesem Fall ein jqui - ctrl - Input + Set-Button, du bräuchtest dann wohl nur den Input Teil

          michl75 1 Reply Last reply Reply Quote 0
          • michl75
            michl75 @BananaJoe last edited by michl75

            @bananajoe @Glasfaser

            Super, vielen Dank euch beiden !!!

            Viele sonnige Grüße M.

            EDIT:

            Kann es sein, dass die JQUI Dinger doch nicht so anpassbar sind?

            Das CSS wirkt sich auf die eigentlich Inputbox nicht aus nur auf das "Feld" wo die Inputbox drinnen ist.

            Das blaue in der Inputbox möchte ich weg haben... aber so macht er nur den Hintergrund vom "Feld" weg. Sorry, wenn ich mich falsch ausdrücke mit Feld...

            y2.PNG

            BananaJoe 1 Reply Last reply Reply Quote 0
            • BananaJoe
              BananaJoe Most Active @michl75 last edited by

              @michl75 rechte maustaste drauf, "Untersuchen". Da öffnen sich die Entwickler-Tools (musst du eventuell bestätigen). Im Reiter elemente kannst du dann genau ermitteln wie das Ding heißt.

              Ansonsten lasst einfach mal das _input weg, das hatte ich ja bei dem Doppel-Widget aus Input und Button

              1 Reply Last reply Reply Quote 0
              • First post
                Last post

              Support us

              ioBroker
              Community Adapters
              Donate

              515
              Online

              31.6k
              Users

              79.6k
              Topics

              1.3m
              Posts

              3
              5
              231
              Loading More Posts
              • Oldest to Newest
              • Newest to Oldest
              • Most Votes
              Reply
              • Reply as topic
              Log in to reply
              Community
              Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
              The ioBroker Community 2014-2023
              logo