Pill Style Inputs on Foundation Forms

Classic
1

Does anyone know how to radius the edges on the input areas in a Foundation form? I’d like them to be a pill, but can’t get it to work.

I gave each input a class of pill and used:

.pill {
border-radius: 16px;
}

My project is here: https://one11sandbox.com/sspros/

2

Try this:

.pill input {
    border-radius: 16px !important;
    padding-left: 12px;
}

The left padding is to align the text in the box a bit. You can adjust to your liking.

3

Don,
YOU ROCK!!! Thank you, it looks fantastic!!

4

A border-radius of 50% would be better…

5

ok, Thanks @joeworkman

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.