I am trying to implement a design from figma but notice it isnt always accurate:
This is the input field i want to create:
Notice how the thin the text is. These are the values from figma:
color: var(--heading-black, #222);
/* Button/16/Regular */
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 16px;
I also use the same color and font-weight, I even tried using 100 instead of 400, yet my result is:
My text is much thicker and I dont know why. This is my css code for my input field:
.search-field {
margin-left: 65px;
width: 429px;
height: 44px;
font-size: 16px;
font-weight: 400;
padding-left: 46px;
background: url("../../../assets/icons/search.png") no-repeat;
background-color: white;
background-size: 21px;
background-position: 14px center;
border: none;
border-radius: 4px;
outline: none;
color: #222;
}
and html:
<input type="text" class="search-field" value placeholder="Booking.com, Expedia, Otto...">
What am I doing wrong?
3
Answers
I think your input is getting its weight from another class or tag.
Try using
!important
for thefont-weight
and see if it works:If you’re getting the same result even if you change the font-weight value, it means you’re having one of these problems:
Last thing, in this case you want to change the appearance of the placeholder so you will have to use the pseudo element ::placeholder so you can change only the style of the placeholder without running the risk of having other problems.
In the code, I provided the placeholder with a lighter color so as to simulate the result.
Try adding the
font-family
property and it’s value in your selector and also use the cdn I used here cause it has all the available font-weights embedded in it.