Rounded text entry with CSS

[Jorge_Hernandez]

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

[Robert_Petitto]

Something like this?

<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;
}

[adriasoce]

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.

[Robert_Petitto]

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;
}

[srinivas_sri]

properly Not working .

[Uzo]

what is not working?

[srinivas_sri]

[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;
}




This code

[Uzo]

you are missing top code:

<pre><span><style>

[srinivas_sri]

Sir I have using above code (

) Still same working . Shadow-box border 0px But Border appears

[Uzo]

I’m having trouble understanding what you need…

[srinivas_sri]

Like this sir (rounded text entry )

[Uzo]

yes, this code will do that…
can you post a screenshot of how you apply this code?

[srinivas_sri]

[Uzo]

and is not changing the entry field?

[srinivas_sri]

[Uzo]

you wanna take out the backround?

[srinivas_sri]

Yes

[Uzo]

.input-wrap{background-color:transparent}

[AugustoMiguel]

Hi @Uzo !!
Is there a way to remove that black border when :foucs?

[Uzo]

yes:

<pre><span><style>
.input-wrap{
background-color:transparent !important;}
.focused .input-wrap{
box-shadow:none !important;}