How can I change the login page layout in Spotlight theme?

[RobArt98]

Hello everyone,

searching for a solution for change the Boxes

Current status

I would like to change in this kind of style

Can someone assist

Many thanks in advance.

Using Spotlight theme

[Dan-From-Ryviu]

Hi @RobArt98

You can try to add this code in your Online store > Themes > Edit code > Assets > base.css file

.customer .field:hover.field:after, .customer select:hover.select:after,
.customer .field:after, .customer select:after {
box-shadow: unset !important;
border-radius: unset !important; 
}
.customer .field:after, .customer select:after {
border-bottom: 1px solid #000;
margin-left: 20px !important;
}

[RobArt98]

@Dan-From-Ryviu thanks for your solution but following issue

[Dan-From-Ryviu]

Could you share your page link?

[RobArt98]

sorry @Dan-From-Ryviu im not allowed to share the url/password

[Dan-From-Ryviu]

Please try to update code like this

.customer .field input:focus, .customer select:focus,
.customer .field:hover.field:after, .customer select:hover.select:after,
.customer .field:after, .customer select:after {
box-shadow: unset !important;
border-radius: unset !important; 
}
.customer .field:after, .customer select:after {
border-bottom: 1px solid #000;
}

[RobArt98]

@Dan-From-Ryviu its working but, the grey lines are still there. possible to hide this grey lines

[Dan-From-Ryviu]

I cannot help you to remove that grey line if don’t check directly on your store link.

The code I sent you work well on Spotlight demo site