0
//我可能在英文中遇到很大的問題，但我希望你能理解。輸入[文字]中的清除按鈕
一般情況下，我嘗試使用Marco的代碼，但我在使用圖標代替文本按鈕時遇到了很大問題。我掩蓋它，給它一個透明的背景，刪除輪廓和邊界。它並沒有幫助我。我解決這個問題如此：
$(".clearbutton").click(function(){
$(".clearable").val("");
});::-webkit-input-placeholder {
text-align: center;
text-shadow: none;
-webkit-text-fill-color: initial;
}
:-moz-placeholder { /* Firefox 18- */
text-align: center;
text-shadow: none;
-webkit-text-fill-color: initial
}
::-moz-placeholder { /* Firefox 19+ */
text-align: center;
text-shadow: none;
-webkit-text-fill-color: initial
}
:-ms-input-placeholder {
text-align: center;
text-shadow: none;
-webkit-text-fill-color: initial
}
input[type="text"] {
background-image: linear-gradient(#FAFAFA, #F1F1F1);
border-radius: 4px;
border-width: 0.5px;
border-color: #ABABAB;
padding: 3px 6px;
outline: none;
border-style: solid;
color: #ABABAB;
text-shadow: 0px 0px 0px #000000;
-webkit-text-fill-color: transparent;
}
input[type="text"]::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
input[type="text"]::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
input[type="text"]:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
input[type="text"]::-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
input[type="text"]:focus::-webkit-input-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;}
input[type="text"]:focus::-moz-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;}
input[type="text"]:focus:-moz-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;}
input[type="text"]:focus:-ms-input-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;}
.uitextbox {
display: table;
}
.clearbutton {
outline: none;
border: none;
background: none;
position: absolute;
margin-right: 25px;
margin-top: 2.5px;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="uitextbox">
<input class="clearable" type="text" placeholder="Search"/>
<button class="clearbutton"><img src="icon.svg" width="15" height="15"></button>
</div>
</body>
</html>UPD：哇，這是工作。好的，但我的第一個問題是它是一個按鈕位置。她不在盒子裏面。我的第二個問題是當box值爲空時按鈕是可見的。不過，我想，我可以解決它。我的第三個問題是裝飾。我知道如何獲得元素衰落效果。但是，我不知道，如何在按鈕和框的文字上做到這一點。而我的手正在從錯誤的地方成長起來。出於某種原因，我不能使用外部js文件，並且當我在html文件中使用腳本時，它就可以工作。我的工作空間可能存在一些問題嗎？ ._.-。
js文件是在 「JS」 的文件夾，是
當我使用外部js文件，它不工作。所以我無法跟隨畫面，只是因爲我沒有那麼多的聲望。
當我在html中使用js時，it works。
見我的回答清晰型文本的第一個輸入。 –