/    Sign up×
Community /Pin to ProfileBookmark

Curves in select box design

Copy linkTweet thisAlerts:
Oct 15.2021

I’m trying to make a form which compares two products.

Here’s an example bar I have. Each select element will have a list of products. It’s fine but it’s very “blocky”

Are there any design experts who could tell me how to make a curve to the inner side of each drop down selection so right or the first, left of the second?

Select ) Vs ( Select

Or any other grand ideas to make it interesting

https://jsfiddle.net/nzkiwis/ra5o3dmw/13/

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@cootheadOct 15.2021 — Hi there kiwis80,

to the best of my knowledge, it is not at all possible to

apply the [i]border-radius[/i] property to the [i]input element[/i].

[i]coothead[/i]
Copy linkTweet thisAlerts:
@kiwisauthorOct 15.2021 — No it's not on the element itself. Was thinking someone may have a cleaver idea on layered DIV or using the before/after pseudo elements etc
Copy linkTweet thisAlerts:
@cootheadOct 15.2021 — Hi there kiwis80,

The [i]select element[/i] dropdown has [i]absolute positioning[/i],

which means that any containing element will not grow

to contain it.

Sometimes it's just better to forget [i]arty-farty[/i] ideas like

this and simply move on.

[i]coothead[/i]
Copy linkTweet thisAlerts:
@SempervivumOct 15.2021 — In order to workaround applying borders to an input element I used a custom select from here:

https://github.com/custom-select/custom-select

The select is converted to an arrangement of div and span containers that can be styled according to the TO's requirement:
``<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
&lt;title&gt;Custom Select With Rounded Edges&lt;/title&gt;
&lt;meta charset="utf-8" /&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;link rel="stylesheet" href="css/custom-select-2.css" /&gt;
&lt;script src="js/custom-select.min.js"&gt;&lt;/script&gt;
&lt;style&gt;
:root {
/* height of outer wrapper: */
--height-outer: 2em;
/* radius for rounded edges
choose larger than half --height-outer */
--radius-select: 2.5em;
/* height of inset for clipping: */
--inset: 1.5em;
}

.select-rounded {
background-color: lightsalmon;
display: flex;
justify-content: space-between;
align-items: center;
}

.custom-select-container {
height: var(--height-outer);
background-color: lightsalmon;
display: flex;
justify-content: space-between;
align-items: center;
}

.custom-select-opener {
width: 15em;
/* clip element on top and bottom: */
clip-path: inset(var(--inset) 0 var(--inset) 0);
/* apply height to containers of custom select: */
height: calc(2 * var(--radius-select));
display: flex;
align-items: center;
overflow: hidden;
}

.custom-select-container:first-of-type .custom-select-opener {
/* apply borders to left container: */
border-top-right-radius: var(--radius-select);
border-bottom-right-radius: var(--radius-select);
}

.custom-select-container:last-of-type .custom-select-opener {
/* apply borders to right container: */
border-top-left-radius: var(--radius-select);
border-bottom-left-radius: var(--radius-select);
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class="select-rounded"&gt;
&lt;select&gt;
&lt;option&gt;John&lt;/option&gt;
&lt;option&gt;Jean&lt;/option&gt;
&lt;option&gt;Richard&lt;/option&gt;
&lt;option&gt;Bob&lt;/option&gt;
&lt;/select&gt;
Vs
&lt;select&gt;
&lt;option&gt;John&lt;/option&gt;
&lt;option&gt;Jean&lt;/option&gt;
&lt;option&gt;Richard&lt;/option&gt;
&lt;option&gt;Bob&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;

&lt;script&gt;
// Initialize custom select:
customSelect('select');
&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;<i>
</i>``
Copy linkTweet thisAlerts:
@kiwisauthorOct 16.2021 — Thinking about something maybe like this -

The chevron could be a label for a checkbox, when that's checked I display a list of options in a DIV?

https://jsfiddle.net/nzkiwis/n9pewagm/22/
Copy linkTweet thisAlerts:
@boohooOct 17.2021 — @coothead#1638228 it *is* possible to use border-radius on inputs. I needed to check if it works for dropdowns and it does as well.
Copy linkTweet thisAlerts:
@cootheadOct 17.2021 — Hi there boohoo,

these...

&lt;input type="button" value="button"&gt;
&lt;input type="color"&gt;
&lt;input type="date"&gt;
&lt;input type="datetime-local"&gt;
&lt;input type="email" value="[email protected]"&gt;
&lt;input type="month"&gt;
&lt;input type="number"&gt;
&lt;input type="password" value="******"&gt;
&lt;input type="reset" value="reset"&gt;
&lt;input type="search" value="search"&gt;
&lt;input type="submit" value="submit"&gt;
&lt;input type="tel"&gt;
&lt;input type="text" value="text"&gt;
&lt;input type="time"&gt;
&lt;input type="url"&gt;
&lt;input type="week"&gt;


...will render [i]border-radius[/i].

[i]coothead[/i]
Copy linkTweet thisAlerts:
@boohooOct 17.2021 — @coothead#1638274 also &lt;textarea&gt; and &lt;select&gt;.
Copy linkTweet thisAlerts:
@cootheadOct 17.2021 — > @boohoo#1638275 also <textarea> and <select>.

You only enquired about the [b]input element[/b]. :)

[i]coothead[/i]
×

Success!

Help @kiwis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...