Styling buttons & dropdown

  • Resolved Florence

    (@floortjahh)


    2 years ago

    Hi there! Thank you for a great working plugin.

    1. I’m looking to change the hover background color of the buttons. Using the Custom Styling section in the plugin settings, I was able to adjust the styling just fine, but I’m not sure how to change the background color on hover. This is what I have:
    input[type="submit" i] {
    appearance: auto;
    user-select: none;
    white-space: pre;
    align-items: flex-start;
    text-align: center;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    background-color: #b9675e;
    color: white;
    padding: 17px 40px;
    border-width: 0px;
    border-style: outset;
    border-color: ;
    border-image: initial;
    font-family: Montserrat;
    font-weight: 300;
    ine-height: 21px;
    text-transform: uppercase;
    font-size: 18px;
    border-radius: 2px;
    width: calc(100%);
}

    2. There’s also a small issue with the border-radius on mobile. It’s all the way round, instead of 2px. This issue doesn’t occur on desktop screens.

    3. Then I’d also love to add a margin to the drop downs for custom questions, so they’re not so smushed together. I wrote some code but it doesn’t seem to work:

    input[type=”dropdown” ] {
margin-right: 0px;
margin-left: 20px;

}

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Miha

    (@mplusb)

    Hi @floortjahh,

    1. Please use this code to change the background color on hover: #rsvpPlugin input[type=”submit”]:hover {
      background-color: red;
      }
    2. I checked the button on mobile and the borders are the same as on desktop. Can you please let me know what browser are you using?
    3. Unfortunately, the options inside that select, are generated by the browser and cannot be directly styled with CSS.

    Warmly,

    Mihaela

    Thread Starter Florence

    (@floortjahh)

    Hi! Thanks for responding.

    1. Unfortunately that code didn’t work. I pasted it in the custom CSS field in the plugin admin, tried a couple different ways. Any idea what could be the issue?
    nput[type="submit" i] {
    appearance: auto;
    user-select: none;
    white-space: pre;
    align-items: flex-start;
    text-align: center;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    background-color: #b9675e;
    color: white;
    padding: 17px 40px;
    border-width: 0px;
    border-style: outset;
    border-color: ;
    border-image: initial;
    font-family: Montserrat;
    font-weight: 300;
    ine-height: 21px;
    text-transform: uppercase;
    font-size: 18px;
    border-radius: 2px;
    width: calc(100%);
}

input[type=”submit”]:hover {
background-color: red;
}

input[type=”dropdown” ] {
margin-right: 0px;
margin-left: 20px;
}

    2. I just checked but I’m seeing completely 50% rounded corners. I’m on an iPhone using Google Chrome.

    3. OK!

    Thank you!

    Plugin Support beatrice12

    (@beatrice12)

    Hello @floortjahh,

    Apologies for the late reply!

    Regarding your first point please use this code: 

    input[type="submit" i] {
????appearance: auto;
????user-select: none;
????white-space: pre;
????align-items: flex-start;
????text-align: center;
????cursor: pointer;
????position: relative;
????box-sizing: border-box;
????background-color:?#B9675E;
????color: white;
????padding: 17px 40px;
????border-width: 0px;
????border-style: outset;
????border-color: ;
????border-image: initial;
????font-family: Montserrat;
????font-weight: 300;
????ine-height: 21px;
????text-transform: uppercase;
????font-size: 18px;
????border-radius: 2px !important;
????width: calc(100%);
???-webkit-appearance: none;
}

    Regarding your second point, delete that code and replace it with this one:

    #rsvpPlugin input[type="submit"]:hover {
    ????background-color: red;
    }

    Warmly,

    Beatrice.

    Thread Starter Florence

    (@floortjahh)

    Hi! This works! Thanks so much for taking the time to respond. This is such a big help with planning our wedding. Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Styling buttons & dropdown’ is closed to new replies.

Tags