Rounded text entry with CSS

Can I make these edges rounded to the “text’s entry’s”?

Something like this?

Screen Shot 2021-06-28 at 11.08.08 PM

<pre><span><style>
[data-test="app-text-field"] {
border: solid 2px;
border-radius: 50px;
margin: 10px;
text-align: center;
}

.tf-inner, .shadow-box, .ta-inputbox {
border: 0px !important;
text-align: center !important;
}
8 Likes

Hi Robert,

Is there a way to have one border while editing and another one for the normal state? I’ve tried with :focus but not worked.

Screen Shot 2021-06-29 at 9.22.24 AM

Try this instead:

<pre><span><style>

[data-test="app-tf-text-input"] {
line-height: 50px !important;
}

.tf-inner {
border: 0px !important;
}

.shadow-box {
border: 0px !important;
height: 50px;
}

.ta-inputbox {
text-align: center !important;
border: solid 2px !important;
border-radius: 50px !important;
}

.ta-inputbox:focus {
border: solid blue 2px !important;
}
4 Likes