search

Semantic-Org / Semantic-UI

Semantic is a UI component framework based around useful principles from natural language.
http://www.semantic-ui.com
MIT License
51.09k stars 4.95k forks source link

[Input] Input with inline labels & error state looks weird #6989

Open felixmosh opened 4 years ago

felixmosh commented 4 years ago

Expected Result

image

Actual Result

image when focused there is a blue right border & double borders (input's & label's) image

Version

2.4.1

Testcase

[Fork, update, and replace to show the bug]: https://jsfiddle.net/bnozsq0v/1/

Proposed solution

Instead of playing with border opacity, we can "pull" by 1px (with margin-right) the label, so it will overlay the input. When the input is focused add z-index so the input border will be above the label, this way it will always show one border in the combinations.

https://jsfiddle.net/y603uwra/2/