使用reset类型按钮清除表单输入数据的示例

使用type为reset的button按钮来清除输入数据

input, reset

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2864
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.r-text-field {
    --uiTextFieldPlaceholderColor: var(--textFieldPlaceholderColor);
    font-family: inherit;
    font-size: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    border-style: solid;
}
.r-text-field::-webkit-input-placeholder {
    color: var(--uiTextFieldPlaceholderColor);
}
.r-text-field::-moz-placeholder {
    opacity: 1;
    color: var(--uiTextFieldPlaceholderColor);
}
.r-text-field:invalid {
    outline: none;
    box-shadow: none;
}
/*
* The r-button component
*/
/*
The component will reset button browser styles
*/

.r-button {
    background-color: transparent;
    padding: 0;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}
/* Remove the inner border and padding in Firefox. */

.r-button::-moz-focus-inner,
.r-button[type="button"]::-moz-focus-inner,
.r-button[type="reset"]::-moz-focus-inner,
.r-button[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}
/*
* The a-field component
*/
/*
 1. The --aFieldHeight option defines an input height. And this option is needed for calculations of a hint final position 
 2. The --aFieldHintFinalCoordinate option defines calculations of the final Y-axis coordinate
 3. The —aFieldPaddingLeft option defines left indent for a hint and query text
*/

.a-field {
    --uiaFieldHeight: var(--aFieldHeight);
    --uiaFieldHintFinalCoordinate: var(--aFieldHintFinalCoordinate, var(--uiaFieldHeight));
    --uiaFieldPaddingLeft: var(--aFieldPaddingLeft);
    position: relative;
    padding-top: calc(var(--uiaFieldHintFinalCoordinate) - var(--uiaFieldHeight));
    /* 1, 2 */
}
.a-field__input {
    box-sizing: border-box;
    height: var(--uiaFieldHeight);
    /* 1 */
    
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--uiaFieldPaddingLeft);
    /* 3 */
}
.a-field__input::-webkit-input-placeholder {
    opacity: 0;
    transition: opacity .2s ease-out;
}
.a-field__input::-moz-placeholder {
    opacity: 0;
}
.a-field__input:focus::-webkit-input-placeholder {
    opacity: 1;
    transition-delay: .2s;
}
.a-field__input:focus::-moz-placeholder {
    opacity: 1;
}
.a-field__label-wrap {
    box-sizing: border-box;
    width: 100%;
    height: var(--uiaFieldHeight);
    /* 1 */
    
    pointer-events: none;
    cursor: text;
    position: absolute;
    bottom: 0;
    left: 0;
}
.a-field__label {
    position: absolute;
    left: var(--uiaFieldPaddingLeft);
    /* 3 */
    
    bottom: calc(50% - .5em);
    line-height: 1;
    pointer-events: none;
}
/* 
  I needed to create an animation onle Chromium broswers because:
  1. Firefox doesn't support a placeholder animation
  2. I couldn't make an correct animation at Edge
*/

@supports (-webkit-appearance: none) {
    .a-field__label {
        transition: bottom .2s cubic-bezier(0.9, -0.15, 0.1, 1.15), opacity .2s ease-out;
        will-change: bottom, opacity;
    }
}
/* If a user had inserted a text of query a hint will be hidden */

.a-field__input:not(:placeholder-shown) ~ .a-field__label-wrap .a-field__label {
    opacity: 0;
    bottom: 85%;
}
/* If the focal point is a field a hint will be displayed */

.a-field__input:focus ~ .a-field__label-wrap .a-field__label {
    opacity: 1;
    bottom: var(--uiaFieldHintFinalCoordinate);
    /* 2 */
}
/*
* the search component
*/

.search {
    --searchFieldHeight: 50px;
    --searchButtonSize: var(--searchFieldHeight);
    --textFieldPlaceholderColor: #fff;
    --aFieldHeight: var(--searchFieldHeight);
    /* The 10px value has been calculated for this demo and you can change it */
    
    --aFieldHintFinalCoordinate: calc(var(--searchFieldHeight) + 10px);
    --aFieldPaddingLeft: 30px;
    color: #fff;
    position: relative;
}
/* 
 1. I needed to set the currentColor value for correct displaying a border on iOS devices
*/

.search__input {
    width: 100%;
    border-width: 3px;
    border-color: currentColor;
    /* 1 */
    
    border-radius: 25px;
    background-color: transparent;
    font-size: 18px;
    color: currentColor;
}
.search__input:focus {
    outline: none;
}
.search__hint {
    font-size: 16px;
}
.search__button {
    color: currentColor;
}
.search__button:focus {
    outline: none;
}
.search__clear {
    width: 1em;
    height: 1em;
    font-size: var(--searchButtonSize);
    position: absolute;
    bottom: 0;
    display: none;
}
/* If a user starts typing a clearing button will be displayed */

.search__input:not(:placeholder-shown) ~ .search__clear {
    display: block;
}
/* If the focal point is a clearing button the hint will be displayed */

.search__clear:focus ~ .a-field__label-wrap .a-field__label {
    opacity: 1;
    bottom: var(--aFieldHintFinalCoordinate);
}
.search__clear-label {
    position: absolute;
    clip: rect(0 0 0 0);
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
}
.search__icon {
    fill: currentColor;
    display: block;
    box-sizing: border-box;
    width: 1.5em;
    height: 1.5em;
    padding: .25em;
    position: absolute;
    top: calc(50% - .75em);
    left: calc(50% - .75em);
}
.search__button:focus .search__icon {
    box-shadow: 0 0 0 3px currentColor;
}
.search__icon-clear {
    font-size: 18px;
}
@media (max-width: 640px) {
    .search__input {
        padding-right: 50px;
    }
    .search__clear {
        right: 10px;
    }
    .search__submit {
        display: block;
        width: 100%;
        padding: 12px 15px;
        background-color: #fff;
        text-transform: uppercase;
        color: #5f27cd;
        border-radius: 25px;
        margin-top: 25px;
    }
    .search__submit:focus {
        box-shadow: 0 0 0 3px currentColor;
        color: #422380;
    }
    .search__icon-search {
        display: none;
    }
}
@media (min-width: 641px) {
    .search__input {
        padding-right: 115px;
    }
    .search__clear {
        right: var(--searchButtonSize);
    }
    .search__submit {
        width: 1em;
        height: 1em;
        font-size: var(--searchButtonSize);
        position: absolute;
        bottom: 0;
        right: 10px;
    }
    .search__submit-label {
        position: absolute;
        clip: rect(0 0 0 0);
        overflow: hidden;
        width: 1px;
        height: 1px;
        margin: -1px;
    }
    .search__icon-search {
        font-size: 22px;
    }
}
body {
    background-color: #5f27cd;
}
span.page__hint {
  color: white;
  display: block;
  margin-top: 10px;
}

HTML

<div class="page">
    <div class="page__demo">
        <form class="search">
            <div class="a-field search__field">
                <input type="text" id="query" class="r-text-field a-field__input search__input" placeholder="e.g CSS Secrets by Lea Verou" required>
                <button class="r-button search__button search__clear" type="reset">
                    <span class="search__clear-label">Clear the search form</span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.971 47.971" class="search__icon search__icon-clear">
                        <path d="M28.228 23.986L47.092 5.122a2.998 2.998 0 0 0 0-4.242 2.998 2.998 0 0 0-4.242 0L23.986 19.744 5.121.88a2.998 2.998 0 0 0-4.242 0 2.998 2.998 0 0 0 0 4.242l18.865 18.864L.879 42.85a2.998 2.998 0 1 0 4.242 4.241l18.865-18.864L42.85 47.091c.586.586 1.354.879 2.121.879s1.535-.293 2.121-.879a2.998 2.998 0 0 0 0-4.242L28.228 23.986z"
                        />
                    </svg>
                </button>
                <label class="a-field__label-wrap search__hint" for="query">
                    <span class="a-field__label">What are you looking for?</span>
                </label>
            </div>
            <button class="r-button search__button search__submit" type="submit">
                <span class="search__submit-label">Search</span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.966 56.966" class="search__icon search__icon-search">
                    <path d="M55.146 51.887L41.588 37.786A22.926 22.926 0 0 0 46.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 0 0 .083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z"
                    />
                </svg>
            </button>
        </form>
        <span class="page__hint">使用type="reset"的button按钮来清除输入数据</span>
    </div>
</div>

使用type为reset的button按钮来清除输入数据

input, reset

编辑器支持Emmet

快捷键

使用type为reset的button按钮来清除输入数据

input, reset

使用VueJS构建的一款带颜色提示密码强度的密码输入框控件

给React.js下拉列表搜索输入框添加动画效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：