“Fügen Sie die Schaltfläche Löschen zur Texteingabe hinzu” Code-Antworten

Fügen Sie die Schaltfläche Löschen zur Texteingabe hinzu

<input type="search" placeholder="Search..."/>

<style>
  input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
  }

  input[type=search] {
      -webkit-appearance: none;
  }
</style> 

Fügen Sie die Schaltfläche Löschen zur Texteingabe hinzu

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
                    $(this).prev('input').val('').trigger('change').focus();
                }));
            });
        </script>
        <style>
            span.deleteicon {
                position: relative;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 16px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <input type="text" class="deletable">
    </body>
</html>

Ähnliche Antworten wie “Fügen Sie die Schaltfläche Löschen zur Texteingabe hinzu”

Fragen ähnlich wie “Fügen Sie die Schaltfläche Löschen zur Texteingabe hinzu”

Weitere verwandte Antworten zu “Fügen Sie die Schaltfläche Löschen zur Texteingabe hinzu” auf HTML

Durchsuchen Sie beliebte Code-Antworten nach Sprache

Durchsuchen Sie andere Codesprachen