I have a design like below. Tried many things to customize input field but couldn’t make it.
Left side is fixed text and right side is input that user needs to enter.
How can I divide input as below and put a vertical line in it?
Should I combine 2 elements (I’m not sure if this is possible) or is there any way to customize input like this?
2
There is actually no way to have an element inside an input, because an input is a void element. The best solution here is to “combine” two elements.
here’s the solution:
.input-wrapper {
--border-size: 2px;
--border-radius: 20px;
background: white; /* the color of your page (you can't set it to transparent */
position: relative;
border-radius: var(--border-radius);
border: var(--border-size) solid transparent;
display: flex;
background-clip: padding-box;
padding: 1rem;
justify-content: space-between;
}
.input-wrapper::before {
position: absolute;
inset: 0;
border-radius: var(--border-radius);
content: "";
z-index: -1;
margin: calc(-1 * var(--border-size));
background-image: linear-gradient(to bottom right, lightblue, blue); /* adjust the border color as needed */
}
*: {
box-sizing: border-box;
}
.input-wrapper > input {
border: none;
text-align: end
}
.input-wrapper > label {
color: lightblue;
border-right: 1px solid lightblue;
padding-right: 1rem;
}<div class="input-wrapper">
<label for="input" id="label">Amount</label>
<input aria-labelledby="label" id="label" placeholder="5,000"/>
</div>Let’s take time to understand the magic:
There’s really nothing really hard except for the border. This comes from this website. you have a div element that contains the label and the input, and you want this element to use a linear gradient as a border. This could work with a border-image but you could not have a border-radius with it.
Here you have a wrapper that has a before pseudo-class. this before element is placed right under the wrapper (z-index:-1) So it takes exactly the same size, but is still contained inside the wrapper’s border. Adding a negative margin makes it overlap the wrapper’s transparent border, so you can actually only see a tiny part of the before element’s background
Edit: this isn’t flawless accessibility-wise, and you may want to adjust the input focused state to remove the outline. Be aware that input should have a visible difference between those states for accessibility purpose.
Thanks to comments I solved this as below.
Combining input with label worked. With right border for label created vertical line.
code is as below.
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@font-face {
font-family: "Poppins";
font-weight: 400;
src: local("Poppins"), url("../../assets/fonts/poppins-regular-webfont.woff2") format("woff2"), url("../../assets/fonts/poppins-regular-webfont.woff") format("woff");
}
.font-poppins {
font-family: "Poppins", sans-serif;
}
#amountDiv {
background: linear-gradient(#fff, #fff) padding-box, linear-gradient(0deg, #00f, #00e8ff) border-box;
border-image-source: linear-gradient(169.4deg, #3984f4 -6.01%, #0cd3ff 36.87%, #2f7cf0 78.04%, #0e65e8 103.77%);
width: 336px;
height: 80px;
top: 1885px;
left: 233px;
gap: 0px;
border-radius: 22px;
border: 1px solid transparent;
}
#amountDiv #amountLabel {
font-family: Poppins;
font-size: 14px;
font-weight: 500;
line-height: 21px;
border-right: 1px solid transparent;
background: linear-gradient(#fff, #fff) padding-box, linear-gradient(0deg, #468ef9, #0c66ee) border-box;
width: 10rem;
padding-left: 2rem;
padding-top: 0.6rem;
padding-bottom: 0.6rem;
color: rgba(70, 142, 249, 1);
}
#amountDiv #amountInput {
border: none;
font-family: Poppins;
font-size: 18px;
font-weight: 500;
line-height: 27px;
text-align: right;
width: 100%;
}
#amountDiv input:focus {
outline: none;
}<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="m-5">
<div id="amountDiv" class="d-flex align-items-center justify-content-evenly">
<label for="" id="amountLabel" class="align-middle">Amount</label>
<input type="text" id="amountInput" class="pe-4">
</div>
</div>
<script src="https://kit.fontawesome.com/175cfcaab6.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>