顯示按鈕時，在純HTML輸入文本/ LESS

我想要一個文本字段，我可以插入文本，當我輸入的文本應該出現在文本框的最後一個按鈕來清除文本。但是我只需要HTML/Less就沒有JS。顯示按鈕時，在純HTML輸入文本/ LESS

正如您在下面的代碼中看到的，我使用了display: none屬性，並且我想在輸入字段中輸入文本後將display: none更改爲display: block。下面

代碼：

    <div class="input-field"> 
        <input name="{{field.name}}" ng-model="field.value" type="text"/> 

        <button class="icon-assistant8 ci-cancel" type="reset"> 
        </button> 

       </div>

這是相關的減檔：

.icon-assistant8 { 
    position: absolute; 
    right: 3px; 
    top: 5px; 
    width: 20px; 
    height: 20px; 
    display: none; 
} 

.icon-assistant8:after { 
    display: block; 
}

編輯：這個例子https://codepen.io/shidhincr/pen/ICLBD後，我知道這是可能只用HTML和CSS來做到這一點。我要做到這一點，但我不能讓它工作，我不知道爲什麼。

而且我知道我可以用JS做到這一點，我只是courious我在做什麼錯。你有沒有在自己的解決方案來實現的the example you've linked to

來源

2017-06-07 Proliges

由於您使用的角度，爲什麼不使用角度來做到這一點？ – reinierkors

您已經在使用的JavaScript ...什麼你所描述的是* *的行爲和行爲是通過JavaScript改變。 –

@reinierkors我知道我可以用角做到這一點。但我只想知道它是否可能只用html和css來完成。我已經看到它與HTML和CSS的工作。 – Proliges

這些關鍵部件採用

.search-box:not(:valid) ~ .close-icon { 
    display: none; 
}

<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />

爲了:not(:valid)匹配，你需要輸入的required屬性。當輸入爲空時，它被認爲是無效的。

這裏有一個基本的例子

input:not(:valid) ~ button { display: none; }

<input type="text" required> 
 
<button type="button">Foo</button>

來源

2017-06-07 12:35:37

顯示按鈕時，在純HTML輸入文本/ LESS

回答

相關問題