实现效果如下图：https://element.eleme.cn/#/zh-CN/component/input
基础版，实现了部分功能，输入框选中高亮、输入值出现可清空按钮、input丢失焦点则隐藏可清空按钮以及选中边框不再高亮、点击清空按钮按钮隐藏以及input中的值清空
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js实现input，选中高亮、输入值之后可清空、移除鼠标清空按钮隐藏、选中高亮移除</title>
</head>
<body>
<div id="app">
<div id="my_input_div" style="width: 140px;border: 1px solid silver;border-radius: 4px;">
<input id="my_input" placeholder='请输入内容' oninput="addNode()" onclick="changeColor()"
style='height: 30px;width:100px;margin-left: 6px;border: none;outline: none;cursor: pointer;'/>
<input id="my_button" value="清空"
style="height: 30px;width: 25px;text-align: center;visibility:
hidden;border: none;outline: none;color: #409eff;cursor: pointer;" onclick="clearValue()"
/>
</div>
</div>
<script>
function changeColor(){
document.getElementById("my_input_div").style.outline="thin outset #409eff";
}
//应该输入内容之后使用该事件
function addNode(){
//将button设置为可见
document.getElementById("my_button").style.visibility = 'visible'
//选中后div添加选中样式 高亮显示
document.getElementById("my_input_div").style.outline="thin outset #409eff";
}
//清空input的值
function clearValue(){
document.getElementById("my_input").value = "";
document.getElementById("my_button").style.visibility = "hidden";
document.getElementById("my_input_div").style.outline="none"
}
function hiddenNode(){
document.getElementById("my_button").style.visibility="hidden";
document.getElementById("my_input_div").style.outline="none"
}
</script>
</body>
</html>
还需完善的点：清空按钮和input移除按钮事件发生冲突、清除样式还需要调整、div边框选中高亮显示样式需要调整
学到的知识点：
document.getElementById('id')之后获取的是元素对象，也就是element对象
document.createElement('input') 创建元素
document.createElement('input').value = '内容' 创建元素并设置内容
document.createElement('input').type = 'button' 创建元素并设置类型
document.getElementById('id').appendChilden(document.createElement('input')) 在id为id的元素添加一个input的子元素
document.getElementById('myId').nextElementSibling 获取id为myId元素的下一个元素
设置style，将id为myId的元素设置为不可见
document.getElementById('myId').style.visibility = 'hidden'
visibility属性的值
visible：可见 hidden：不可见 collapse：当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
设置选中时不高亮
document.getElementById('myId').style.outline = 'none'
outline属性的值可以有三个，轮廓宽度、轮廓样式、轮廓颜色
Object.style.outline = outlineWidth outlineStyle outlineColor
outlineWidrh
thin：瘦的 medium：中的 thick：厚的 length：长的
outlineStyle
none hidden dotted dashed solid double groove ridge inset outset
outlineColor
color-name color-rgb color-hex transparent
border边框的属性。跟outlineColor相同不再追叙
Object.style.border=borderWidth borderStyle borderColor
附加第一版粗糙版源码，动态添加元素版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js实现input</title>
</head>
<body>
<div id="app">
<div id="my_input_div" style="width: 140px;border: 1px solid silver;border-radius: 4px;">
<input id="my_input" placeholder='请输入内容' onclick="addNode()" onblur="hiddenNode()"
style='height: 30px;width:100px;margin-left: 6px;border: none;outline: none;'/>
<input id="my_button" type="button" value="*" onclick="clearValue()" style="visibility: hidden;"/>
</div>
</div>
<script>
document.getElementById("app");
//应该输入内容之后使用该事件
function addNode(){
//将button设置为可见
document.getElementById("my_button").style.visibility = 'visible'
document.getElementById("my_input_div").style.outline="thin solid #409eff";
/* var input = document.getElementById("my_input_div");
var spanNode = document.getElementById("my_input").nextElementSibling;
//添加判断 如果已经存在删除按钮 则不再重复添加
if (spanNode == null){
var span = document.createElement('input');
span.type = "button"
span.value = "*"
span.onclick = function removeValue(){
console.log("2")
var myInput = document.getElementById("my_input");
myInput.value = "";
removeNode();
}
input.appendChild(span)
} */
}
function clearValue(){
document.getElementById("my_input").value = "";
document.getElementById("my_button").style.visibility = "hidden";
}
function hiddenNode(){
document.getElementById("my_button").style.visibility="hidden";
}
/* function removeNode(){
console.log("1")
var spanNode = document.getElementById("my_input").nextElementSibling;
spanNode.style.visibility = 'hidden';
//spanNode.remove();
} */
</script>
</body>
</html>