simple-phone-mask/src/simple-phone-mask.css

A lightweight and customizable phone number input mask with country flags, search, validation and dark theme.

/* =========================================
   Simple Phone Mask v1.0.5
   ========================================= */

/* --- Wrapper --- */
.spm-wrapper {
	position: relative;
	display: inline-flex;
	flex-direction: column;
}

/* --- Input --- */
.spm-input {
	padding-left: 36px !important;
}

.spm-input.spm-invalid {
	border-color: #e53e3e !important;
	box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.2);
	outline-color: #e53e3e;
}

.spm-input.spm-valid {
	border-color: #38a169 !important;
	box-shadow: 0 0 0 2px rgba(56, 161, 105, 0.2);
	outline-color: #38a169;
}

/* --- Validation message --- */
.spm-validation-message {
	display: none;
	font-size: 12px;
	margin-top: 4px;
	color: #e53e3e;
}

.spm-validation-message.spm-valid-msg {
	color: #38a169;
}

/* --- Flag Button --- */
.spm-flag-button {
	position: absolute;
	left: 6px;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	z-index: 1;
}

.spm-flag-button--selectable {
	cursor: pointer;
}

.spm-flag-button--non-selectable {
	cursor: default;
}

.spm-flag-image {
	width: 20px;
	height: 15px;
	object-fit: cover;
	border-radius: 2px;
}

/* --- Dropdown --- */
.spm-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 1000;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	width: 270px;
	overflow: hidden;
}

/* --- Search --- */
.spm-search-wrapper {
	padding: 8px;
	border-bottom: 1px solid #eee;
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 1;
}

.spm-search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 6px 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 13px;
	outline: none;
	background: #f9f9f9;
	transition: border-color 0.15s;
}

.spm-search-input:focus {
	border-color: #4a90e2;
	background: #fff;
}

/* --- Options List --- */
.spm-options-list {
	max-height: 200px;
	overflow-y: auto;
}

.spm-dropdown-option {
	padding: 8px 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}

.spm-dropdown-option:hover,
.spm-dropdown-option.spm-option-selected {
	background-color: #f0f5ff;
}

.spm-dropdown-option.spm-option-selected {
	font-weight: 600;
}

.spm-country-name {
	flex-grow: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.spm-country-code {
	color: #888;
	margin-left: auto;
	font-size: 12px;
	white-space: nowrap;
}

/* --- Preferred countries divider --- */
.spm-divider {
	border: none;
	border-top: 1px solid #e8e8e8;
	margin: 4px 0;
}

/* --- No results --- */
.spm-no-results {
	padding: 10px;
	text-align: center;
	color: #aaa;
	font-size: 13px;
}

/* =========================================
   Dark Theme  (.spm-dark on wrapper)
   ========================================= */
.spm-dark .spm-dropdown {
	background-color: #1e1e2e;
	border-color: #3a3a52;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.spm-dark .spm-search-wrapper {
	background: #1e1e2e;
	border-bottom-color: #3a3a52;
}

.spm-dark .spm-search-input {
	background: #2a2a3e;
	border-color: #3a3a52;
	color: #dde1f0;
}

.spm-dark .spm-search-input::placeholder {
	color: #555;
}

.spm-dark .spm-search-input:focus {
	border-color: #6c8ef4;
	background: #2e2e44;
}

.spm-dark .spm-options-list {
	scrollbar-color: #3a3a52 transparent;
}

.spm-dark .spm-dropdown-option {
	color: #dde1f0;
}

.spm-dark .spm-dropdown-option:hover,
.spm-dark .spm-dropdown-option.spm-option-selected {
	background-color: #2e2e48;
}

.spm-dark .spm-country-code {
	color: #777;
}

.spm-dark .spm-divider {
	border-top-color: #3a3a52;
}

.spm-dark .spm-no-results {
	color: #555;
}

/* Dark validation colours */
.spm-dark .spm-input.spm-invalid {
	border-color: #fc8181 !important;
	box-shadow: 0 0 0 2px rgba(252, 129, 129, 0.2);
}

.spm-dark .spm-input.spm-valid {
	border-color: #68d391 !important;
	box-shadow: 0 0 0 2px rgba(104, 211, 145, 0.2);
}

code[class*=language-], pre[class*=language-] {
	text-shadow: 0 0 0 black!important;
}
.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url {
	background: transparent !important;
}