我正在制作流利风格的输入栏 这就是我的进步
但是,我希望它的线条没有圆角,并且当焦点放在它上面时它会改变它的高度(它移动布局)
我该怎么办?
这是我的代码↓
body {
background-color: #1a2228;
}
input {
background: #272f36;
border: 1px solid #282d31;
border-radius: 3px;
width: 10em;
line-height: 1.5em;
outline: none;
color: white;
border-bottom: 1px solid #979a9e;
padding-left: 5px;
transition: 200ms;
}
input::placeholder {
color: #aeaeae;
transition: 200ms;
}
input:hover {
transition: 200ms;
background: #2d343b;
}
input:focus {
background: #1d1f21;
transition: 200ms;
border-bottom: 2px #4cc2ff solid;
}
input:focus::placeholder {
color: #959697;
}
input[type="number"]::-webkit-inner-spin-button {
cursor: pointer;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
<input id="a" type="number" min="0" max="100" placeholder="test">
没有圆角底部,像微软流利设计
body {
background-color: #1a2228;
}
input {
box-sizing: border-box;
background: #272f36;
border-radius: 3px;
line-height: 1.5em;
border: 0;
outline: none;
color: white;
border-bottom: 1px solid #979a9e;
width: 100%;
}
input:focus {
border-color: transparent;
}
.myinput {
width: 10em;
}
.myinput:has(input:focus) {
border-bottom: 1px solid #4cc2ff;
}
<div class="myinput">
<input>
</div>