mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

style: fix TextArea custom border style not working

Browse Source 
when allowClear is enable

close #38068
This commit is contained in:
afc163 2022-10-19 12:05:24 +08:00
parent 51662df37d
commit 58fdfc0f62
3 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/input/demo/borderless-debug.md
View File

@ -1,14 +1,14 @@
--- ---
order: 98 order: 98
title: title:
zh-CN: Borderless Debug zh-CN: Style Debug
en-US: Borderless Debug en-US: Style Debug
debug: true debug: true
--- ---
## zh-CN ## zh-CN
Buggy! Buggy! 测试一些踩过的样式坑。
## en-US ## en-US
@ -29,6 +29,7 @@ const App: React.FC = () => (
<Input placeholder="Unbordered" bordered={false} allowClear /> <Input placeholder="Unbordered" bordered={false} allowClear />
<Input prefix="￥" suffix="RMB" bordered={false} /> <Input prefix="￥" suffix="RMB" bordered={false} />
<Input prefix="￥" suffix="RMB" disabled bordered={false} /> <Input prefix="￥" suffix="RMB" disabled bordered={false} />
<TextArea allowClear style={{ border: '2px solid #000' }} />
</div> </div>
); );

7
components/input/style/affix.less
View File

@ -28,8 +28,7 @@
} }
} }
> input.@{ant-prefix}-input { > .@{ant-prefix}-input {
padding: 0;
font-size: inherit; font-size: inherit;
border: none; border: none;
outline: none; outline: none;
@ -37,6 +36,10 @@
&:focus { &:focus {
box-shadow: none !important; box-shadow: none !important;
} }
&:not(textarea) {
padding: 0;
}
} }
&::before { &::before {

11
components/input/style/allow-clear.less
View File

@ -2,8 +2,8 @@
@input-prefix-cls: ~'@{ant-prefix}-input'; @input-prefix-cls: ~'@{ant-prefix}-input';
// ========================= Input ========================= // ========================= Input =========================
.@{iconfont-css-prefix}.@{ant-prefix}-input-clear-icon, .@{iconfont-css-prefix}.@{input-prefix-cls}-clear-icon,
.@{ant-prefix}-input-clear-icon { .@{input-prefix-cls}-clear-icon {
margin: 0; margin: 0;
color: @disabled-color; color: @disabled-color;
font-size: @font-size-sm; font-size: @font-size-sm;
@ -31,11 +31,10 @@
} }
// ======================= TextArea ======================== // ======================= TextArea ========================
.@{ant-prefix}-input-affix-wrapper-textarea-with-clear-btn { .@{input-prefix-cls}-affix-wrapper.@{input-prefix-cls}-affix-wrapper-textarea-with-clear-btn {
padding: 0 !important; padding: 0;
border: 0 !important;
.@{ant-prefix}-input-clear-icon { .@{input-prefix-cls}-clear-icon {
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; right: 8px;