Solved How do you change the Search Field styling for the Search Slider widget?

Discussion in 'All Other Widgets' started by cpburke91, Dec 21, 2017.

  1. cpburke91

    cpburke91 Member

    5
    0
    I can change the size and color of the text that displays when the user types something, but not the color of the display text. It defaults to a dark grey color, which doesn't look good on dark backgrounds.

    Also, the search field randomly has 10 px of padding applied to all sides. How does we remove or adjust the padding and margins? The padding and margin controls through Muse don't actually adjust the search field widget. I don't have any styles applied to the widget and can't seem to wrap my head around why you can't change the display text color and widget padding/margins. Any help is appreciated.
     

    Attached Files:

  2. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    cp, this is something that actually happens in the Browser, if you set a color on an input, the color will take effect when you type in text (as you found), however the browser has a default color it places on "placeholder" text (in this case the 'search' word), which is the text that is there by default. This is done for accessibility / color blindness purposes.
    You can place this code into the head of the page with the widget (Page>Page properties> meta data>head), and replace the color Red, with the color you would like.
    <style>
    ::-webkit-input-placeholder {
    color: red !important;
    }
    ::-moz-placeholder {
    color: red !important;
    }
    :-ms-input-placeholder {
    color: red !important;
    }
    </style>

    Hope this helps
    Dj
     
    cpburke91 likes this.
  3. cpburke91

    cpburke91 Member

    5
    0
    Thank you, it worked. What about the margins/padding? Can that be changed as well?
     
  4. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    cp, yes, I'm sorry, I forgot to answer that one.
    You can use the 'Indent' in the Text panel to change that.
    Dj
     
  5. cpburke91

    cpburke91 Member

    5
    0
    What if I want to decrease the margins or padding? There doesn't seem to be a way to do that, so all you can do is increase it?
     
  6. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    cp, I might not understand what you're trying to accomplish, positive and negative numbers increase and decrease the indent / margins.
    Could you possibly give me an example of what you're try to do?
    Thanks
    Dj
     

Share This Page