Some code to customize Lock Screen in Squarespace.

Add code to Home > Settings > Advanced > Code Injection > Lock Page

Lock Screen Background

Background Color

<style>
  .sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
  	background: red;
  }
</style>

Background Image

<style>
.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/11/work-5382501_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Lock Screen Password Input

Password Input background

<style>
input[type="password"] {
    background: green !important;
}
</style>

Password Input text color

<style>
input[type="password"]::placeholder {
    color: red !important;
}
</style>

Password Input border

<style>
input[type="password"] {
    border: 2px solid red;
}
</style>

Password Input arrow color

<style>
.icon-wrapper.arrow {
    opacity: 1 !important;
    fill: red !important;
}
</style>

Rename password text

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('input[type="password"]').attr('placeholder','tuanphan');
});
</script>

Lock Screen Error Message

Message color

<style>
.error-message {
    background: green !important;
    color: violet !important;
}
</style>

Lock Screen Custom Font

@font-face {
  font-family: 'tuan';
  src: url(paste font file url here);
}
* {
  font-family: 'tuan' !important;
}

Other Effects

Lock Screen Countdown

Add this code into Home > Settings > Advanced > Code Injection > Lock Page

Reference: Designing a lock screen – Squrarespace Support.