css magic based on last question ( i closed it by misstake)

[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

---

[Support]

Hello Pelle,

So glad to know you are satisfied with Porto!

Regarding input-group-prepend question, you can overwrite the previous CSS rules by adding this new CSS:

.input-group-prepend + :required {
	border-right-color: red !important;
	border-left-color: #e1e1e1 !important;
}

* The code above will back the left border to default color and add right border color.
* This will be applied only at input-group-prepend fields.

We hope this helps!

Kind Regards,

Rodrigo.

---

[pellesoft]

Hi, thanks but no.

this line will come on the right side of the “icon-box” and left of the input-box. I want the lite to appear left of the “icon-box” so to speak. See the advanced input fields with icons on the left ..

Best regards and have a nice weekend
Pelle

---

[Support]

Hello Pelle,

Oh right!

Unfortunately there’s no CSS we can apply to make that. The only way on this case is create a custom class for the border left color. For example:

HTML:

<span class="input-group-prepend input-group-prepend-required"></span>

CSS:

.input-group-prepend-required {
    border-left: 1px solid red !important;
}

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

[Support]

Hello Pelle,

Another way is change the HTML structure of input-grou-prepend (add after the input):

<div class="input-group">												
	<input type="text" class="form-control order-2" required>
	<span class="input-group-prepend order-1">
		<span class="input-group-text">
			<i class="fas fa-calendar-alt"></i>
		</span>
	</span>
</div>

* Also note the order-xx classes for change the order of elements.

And use this CSS:

input:required + .input-group-prepend {
	border-left: 1px solid red !important;
}

We hope this helps!

Kind Regards,

Rodrigo.

---

[Author]

Posts