What's the easiest way to get inputs with rounded corners?

Question

Currently I'm working on a React page with Semantic UI, and I'm struggling to find the easiest way to get Input components with rounded corners. Just applying border-radius as normal doesn't seem to work; does anyone have any better ideas?

(To clarify - I'm looking for basically the same look at the Search component in Semantic-React.)

and what do you see in the developer tools for this css style? is it being overriden? by something specific? — c-chavez, Nov 19 '18 at 15:43

score 5 · Accepted Answer · answered Nov 28 '18 at 18:58

The styles and rendering for Forms and Input elements in SUI and SUIR gets a little tricky. Especially once you abstract the rendered markup into React components.

What is actually happening in Semantic UI React? Let's take a look:

// This...

<Input placeholder='Search...' />

// Renders this in the DOM

<div class="ui input">
  <input placeholder="Search..." type="text">
</div>

Makes sense so far. But examining this closer, we get a clue as to where our problem lies. Where do we think the inline styles are going to be applied when we use the styles prop? On the outer <div> or on the <input>?

// This...

<Input 
  placeholder='Search...'
  styles={{borderRadius: '100px'}}
/>

// Renders this in the DOM - Not what we want :(

<div class="ui input" style="border-radius: 100px;">
  <input placeholder="Search..." type="text">
</div>

In theory the above might be okay if the styles for Semantic UI inputs were exclusively on the parent div.ui.input. Not all of them actually are. Some styles explicitly target the child <input> with .ui.input > input {...} which is where our problem lies if we want to pass styles in exclusively in React with the styles prop.

So, how do we get styles onto that inner <input> without writing separate, more specific CSS that overrides the compiled Semantic UI styles? Luckily Semantic UI React actually lets you pass an <input> as React children. Take a look at this:

// This...
<Input placeholder='Search...'>
  <input style={{borderRadius: '100px'}} />
</Input>

// Gives us this, which is what we want!
<div class="ui input">
  <input placeholder="Search..." type="text" style="border-radius: 100px;"> . 
</div>

Hopefully you find this answer to your earlier question in time to help you out. I threw in a quick screenshot below to show what this looks like.

This is fantastic, thank you very much - it's a total solution to my problem! — mmartinn, Dec 04 '18 at 13:22
my solution is to add the icon after input like this and this works — Aljohn Yamaro, Mar 26 '20 at 00:25

What's the easiest way to get inputs with rounded corners?

1 Answers1