- Add example to the new form control docs - Reset the [list] selector in Reboot to hide the random dropdown arrow in Chrome
3.8 KiB
layout | title | description | group | toc |
---|---|---|---|---|
docs | Form controls | Give textual form controls like `<input>`s and `<textarea>`s an upgrade with custom styles, sizing, focus states, and more. | forms | true |
Example
{{< example >}}
Sizing
Set heights using classes like .form-control-lg
and .form-control-sm
.
{{< example >}} {{< /example >}}
Readonly
Add the readonly
boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
{{< example >}} {{< /example >}}
Readonly plain text
If you want to have <input readonly>
elements in your form styled as plain text, use the .form-control-plaintext
class to remove the default form field styling and preserve the correct margin and padding.
{{< example >}}
{{< example >}}
Color
Keep in mind color inputs are not supported in IE.
{{< example >}}
{{< /example >}}Datalists
Datalists allow you to create a group of <option>
s that can be accessed (and autocompleted) from within an <input>
. These are similar to <select>
elements, but come with more menu styling limitations and differences. While most browsers and operating systems include some support for <datalist>
elements, their styling is inconsistent at best.
Learn more about support for datalist elements.
{{< example >}}
{{< /example >}}