Skip to content

Instantly share code, notes, and snippets.

@schalkventer

schalkventer/index.html

Last active January 16, 2025 04:56
Show Gist options
  • Save schalkventer/d46062101777823aaef54090aa5b79c1 to your computer and use it in GitHub Desktop.
Save schalkventer/d46062101777823aaef54090aa5b79c1 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Input with prefixes/suffixes as data attributes
Raw
index.html
<!-- Video at: https://www.youtube.com/watch?v=QAVDDiBT5hA&ab_channel=FrontendEngineering%26DesignSouthAfrica%28FEDSA%29 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<h1 class="title">Mortgage Calculator</h1>
<form class="layout">
<label class="field" data-prefix="R">
<div class="field__label">Mortgage Amount</div>
<input class="field__input" />
</label>
<div class="layout__row">
<label class="field" data-suffix="%">
<div class="field__label">Mortgage Amount</div>
<input class="field__input" />
</label>
<label class="field">
<div class="field__label">Mortgage Amount</div>
<input class="field__input" />
</label>
</div>
</form>
</body>
</html>
Raw
styles.css
* {
box-sizing: border-box;
}
:root {
--background: white;
--color-dark-blue: rgb(0, 30, 50, 1);
--color-medium-blue: rgba(40, 80, 100, 0.5);
--color-light-blue: rgba(40, 80, 200, 0.15);
--color-green: #d8db2f;
}
body {
margin: 0;
background: var(--background);
font-family: "Plus Jakarta Sans", serif;
color: var(--color-dark-blue);
}
/* Layout */
.layout {
width: 100%;
display: flex;
flex-direction: column;
gap: 2rem;
}
.layout__row {
display: flex;
gap: 1rem;
flex-direction: row;
}
/* Field */
.field {
width: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
}
.field[data-prefix]::before {
content: attr(data-prefix);
background: var(--color-light-blue);
color: var(--color-medium-blue);
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
position: absolute;
left: 1px;
bottom: 1px;
height: calc(3rem - 2px);
overflow: hidden;
border-radius: 4px 0 0 4px;
font-weight: bold;
font-size: 1.125rem;
border-right: 1px solid var(--color-medium-blue);
}
.field[data-suffix]::after {
content: attr(data-suffix);
background: var(--color-light-blue);
color: var(--color-medium-blue);
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
position: absolute;
right: 1px;
bottom: 1px;
height: calc(3rem - 2px);
overflow: hidden;
border-radius: 0 4px 4px 0;
font-weight: bold;
font-size: 1.125rem;
border-left: 1px solid var(--color-medium-blue);
}
.field__label {
font-size: 1rem;
font-weight: 500;
color: var(--color-dark-blue);
}
.field__input {
height: 3rem;
border-radius: 4px;
border: 1px solid var(--color-medium-blue);
font-size: 1.125rem;
font-weight: bold;
padding: 0 0.5rem;
background: none;
color: var(--color-dark-blue);
}
.field[data-prefix] .field__input {
padding-left: 3rem;
}
.field[data-suffix] .field__input {
padding-right: 3rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment