1回答

西门老舅

2023-10-12

你好，你是说输入框获取焦点的时候，labels位置改变吗？

这个就是先把labels定位到输入框上边，源码可以看到，如下：

.form-floating>label {

    position: absolute;

    top: 0;

    left: 0;

    z-index: 2;

    height: 100%;

    padding: 1rem 0.75rem;

    overflow: hidden;

    text-align: start;

    text-overflow: ellipsis;

    white-space: nowrap;

    pointer-events: none;

    border: var(--bs-border-width) solid transparent;

    transform-origin: 0 0;

    transition: opacity .1s ease-in-out,transform .1s ease-in-out;

}

然后当获取焦点的时候，对labels做大小和位置的改变，源码可以看到，如下：

.form-floating>.form-control:focus~label {

  color: rgba(var(--bs-body-color-rgb),.65);

  transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);

}

0

0