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。
见我的回答清晰型文本的第一个输入。 –