how to set border on select2-dropdown when required

[pellesoft]

Hi, i hope that everything is ok!

i have got stucked on a css-question. i want to put a line around a select2-object and only when the required are added.

I am trying
.select2 .select2-selection :required {
border-left-color: limegreen !important;
}

:required {
border-left-color: white !important;
}

and i cannot get it to work.

a sample page with this objects without loggin in, please see the register page with a dropdown at https://mcparken.se/pages/account/create-account.aspx

thanks in advance
Pelle

---

[pellesoft]

Just to be clear of my purpose:

I want to make a css-border that works when text fields and dropdowns are marked “required” on these controls. also, they should work with html.dark and regular so i can change them as well.

Thanks again
regards Pelle

---

[Support]

Hello Pelle,

We hope everything is well with you too!

Here’s the CSS code you need:

:required,
select[data-plugin-selecttwo]:required + .select2 .select2-selection {
    border-left-color: limegreen !important;
}

/* Dark */
html.dark :required,
html.dark select[data-plugin-selecttwo]:required + .select2 .select2-selection {
    border-left-color: limegreen !important;
}

For select2 is needed the selector select[data-plugin-selecttwo]:required +.

We hope this helps!

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[pellesoft]

Hi Rodrigo, thank you – i am fine, the site with your template has now passed 450.000 visitors – and no one with no browser has complained that things are looking strange, 100% love you you for this! 🙂

You solved the problem, and i really don’t understand what is happening with the css-format here that solves it, it has to be magic! Thank you ever so much.

I have a trick question to this that i forgot. Is it possible with a css to behave differently if there is a input-group-prepend (for eg. an icon with calendar before the input box) or do i have to identify this differently? What happens with this code, the line comes between the logo and the textbox so to speak. I assume this is not possible with css, but asks anyway – nothing seems to be impossible when it comes to you 🙂

Best regards
Pelle

---

[Author]

Posts