html自定义文本框,自定义输入框.html

* {

margin: 0;

padding: 0;

font-family: "PingFang SC","Helvetica Neue",Helvetica,Arial,STHeiTi,"Microsoft YaHei",sans-serif;

box-sizing: border-box;

}

#amountsDis {

background: lightblue;

border-radius: 8px;

padding-left: .42666667rem;

padding-right: .42666667rem;

}

.input-amount {

height: 1.6rem;

line-height: 1.6rem;

}

.row {

display: flex;

}

.input-amount .label {

padding-right: .21333333rem;

font-size: .4rem;

font-weight: 500;

color: #888;

}

.col {

flex: 1;

}

.input-amount .value {

display: flex;

color: #000;

}

.input-amount .currency {

padding-top: .72rem;

padding-right: .16rem;

font-size: .53333333rem;

line-height: 1;

}

.input-amount .amount {

font-size: 1.06666667rem;

line-height: 1;

padding-top: .29333333rem;

font-weight: 500;

}

.cursor-c {

padding-top: .34666667rem;

padding-bottom: .32rem;

}

.cursor {

display: block;

width: .05333333rem;

height: .93333333rem;

background: #426bf2;

border-radius: 17%;

animation-duration: 1.1s;

animation-iteration-count: infinite;

animation-name: cursor;

}

@-webkit-keyframes cursor {

0% {

opacity: 0

}

30% {

opacity: 1

}

50% {

opacity: 1

}

80% {

opacity: 0

}

100% {

opacity: 0

}

}

消费金额

¥

class="cursor-c">

优惠

¥

class="amount js-discount">

src="https://img-blog.csdnimg.cn/2022010709535389987.png">

实付

¥

// 直接从 收钱吧 复制的

// 注意 html 的 font-size 是 37.5px

// 根据键盘点击事件, 改变 e('.js-amount-view') 的值就好了

一键复制

编辑

Web IDE

原始数据

按行查看

历史