pointer-events

by redky

HTML

<div class="wrap">
    <input type="text" />
    <div class="s"></div>
</div>

CSS

.wrap {
    height: 34px;
    padding: 0 4px;
    border: 1px solid #333;
    box-sizing: border-box;
    position: relative;
    width: 60%;
    margin: 0 auto;
}

.wrap input {
    border: 0 none;
    height: 24px;
    padding: 4px 0;
    width: 100%;
    outline: none;
}

.s {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #f00;
    right: 0;
    top: 7px;
    pointer-events: auto;
    cursor: pointer;
}