Как добавить крестик внутри ввода, чтобы очистить текст с помощью ZURB CSS? - PullRequest
Новая
       9

Как добавить крестик внутри ввода, чтобы очистить текст с помощью ZURB CSS?

0 голосов
/ 03 января 2019

Нам нужно добавить крестик внутри текстового поля ввода, его целью будет очистка текста из поля ввода.

Я добавил, но он не отображается внутри поля ввода.Я использую основу фреймворка curb.

.search-input {
    background-image: url(/assets/img/icons/search-icon.svg);
    background-size: 1.25rem;
    background-repeat: no-repeat;
    background-position: left 0.75rem center;
    text-indent: 1.8rem;
}
.input-wrapper-outer input, .input-wrapper-outer .button {
    margin-bottom: 0;
}
<html>
<head><script src="https://cdnjs.cloudflare.com/ajax/libs/foundation-essential/6.2.2/js/vendor/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation-essential/6.2.2/js/foundation.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation-essential/6.2.2/css/foundation.min.css" rel="stylesheet"/>

</head>
<body>
<div class="input-wrapper-outer">
            <form class="input-wrapper">
              <input
                class="search-input"
                data-checkval
                name="query"
                placeholder="Search ID"
                type="tel"
                pattern="[0-9]*"
              >
              <button
                title="Click me to clear the input field"
                type="reset"
                class="is-active"
              >
                x
              </button>
            </form>
          </div>
</body>
</html>

1 Ответ

0 голосов
/ 03 января 2019

Дайте ему абсолютную позицию и примените позиционирование; 

.search-input {
    background-image: url(/assets/img/icons/search-icon.svg);
    background-size: 1.25rem;
    background-repeat: no-repeat;
    background-position: left 0.75rem center;
    text-indent: 1.8rem;
}
.input-wrapper-outer input, .input-wrapper-outer .button {
    margin-bottom: 0;
}

.input-wrapper{ position: relative; }

.is-active{
position: absolute;
    top: 0;
    height: 100%;
    right: 10px;
    font-size: 24px;
}
<html>
<head><script src="https://cdnjs.cloudflare.com/ajax/libs/foundation-essential/6.2.2/js/vendor/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation-essential/6.2.2/js/foundation.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation-essential/6.2.2/css/foundation.min.css" rel="stylesheet"/>

</head>
<body>
<div class="input-wrapper-outer">
            <form class="input-wrapper">
              <input
                class="search-input"
                data-checkval
                name="query"
                placeholder="Search Fabric ID"
                type="tel"
                pattern="[0-9]*"
              >
              <button
                title="Click me to clear the input field"
                type="reset"
                onclick="alert('Clear')"
                class="is-active"
              >
                x
              </button>
            </form>
          </div>
</body>
</html>
...