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：うわー、それは働いています。さて、しかし、私の最初の問題は、ボタンの位置です。彼女は箱の中にいません。私の2番目の問題は、ボックスの値が空のときにどのボタンが表示されるかです。しかし、私はそれを解決できると思います。私の3番目の問題は装飾です。私は要素フェージング効果を得る方法を知っています。しかし、私はボタンとボックスのテキストでそれを行う方法はわかりません。そして私の手は間違った場所から成長しています。何らかの理由で私は外部のjsファイルを使用できません.HTMLファイルの内部でスクリプトを使用すると、動作しています。私のワークスペースにいくつかの問題がありますか？ ._.-。
の.jsはそれが私はjsの外部ファイルを使用する場合、それが動作しません
ええ、 "JS" フォルダ内のファイル。だから私はあまり評判があまりないので、絵をたどることはできません。
html内でjsを使用すると、it worksとなります。
型テキストの最初の入力をクリアするために私の答えを参照してください。 –