CSS 如何将 <span> 放入 <input> 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26963878/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I put a <span> inside of an <input>?
提问by Drazzah
This is not a duplicate. While I was basically looking for the same result as the other post, I wanted to go about it in a different way. They were using background image, and I wanted to use a <span>.
这不是重复的。虽然我基本上在寻找与另一篇文章相同的结果，但我想以不同的方式进行。他们正在使用背景图像，而我想使用<span>.
I am trying to make a textbox so that when the user types into it, a "X" shows up on the right. However, I do not want the "X" to show up when there is no text in the box, like it does now.
我正在尝试制作一个文本框，以便当用户输入时，右侧会显示一个“X”。但是，我不希望框中没有文本时显示“X”，就像现在一样。
I tried to make the "X" white, and have it transition it's color when it slides, but you can still select in when you drag the mousedown over it.
我试图将“X”变成白色，并让它在滑动时转换它的颜色，但是当你将鼠标拖到它上面时你仍然可以选择。
I'm thinking that I need to put it inside the textbox (somehow), then slide it to the right and hide it using overflow: hidden. I did also try to do this, but I couldn't get anywhere with it.
我想我需要将它放在文本框内（以某种方式），然后将它向右滑动并使用overflow: hidden. 我也确实尝试过这样做，但我无能为力。
http://jsfiddle.net/qgy8Ly5L/16/
http://jsfiddle.net/qgy8Ly5L/16/
The <span>should be "behind" the white background when it's not showing. Mid transition should look like this:
本<span>应该是“落后”的白色背景时，它没有显示。中间过渡应该是这样的：
(source: googledrive.com)
（来源：googledrive.com）
Is this possible in CSS, and if so, how can I do it?
这在 CSS 中是否可行，如果可以，我该怎么做？
回答by Antoine Combes
Wrap both your input and your span inside a container, position this container as relative, and the span as absolute. You can now do whatever you like with the span.
将您的输入和跨度都包装在一个容器中，将此容器定位为相对，并将跨度定位为绝对。您现在可以对跨度执行任何您喜欢的操作。
function checkInput(text) {
if (text) {
$("#clearBtn1").addClass("show");
} else {
$("#clearBtn1").removeClass("show");
}
}.text-container {
display: inline-block;
position: relative;
overflow: hidden;
}
.clearBtn {
position: absolute;
top: 0;
right: -15px;
transition: right 0.2s;
}
.show {
right: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
<input type="text" onkeyup="checkInput(this.value)" />
<span id="clearBtn1" class="clearBtn">X</span>
</div>回答by nunoarruda
Hide the X by default and use the show class when needed
默认隐藏 X 并在需要时使用 show 类
.clearBtn {
position: relative;
left: 0;
transition: left 0.3s;
display: none;
}
.show {
display: inline;
}
JS
JS
function checkInput(text) {
if (text != ""){
$("#clearBtn1").addClass("show");
} else {
$("#clearBtn1").removeClass("show");
}
}
回答by beautifulcoder
Check out this updated fiddle:
看看这个更新的小提琴：
function checkInput(text) {
if (text) {
$("#clearBtn1").addClass("show");
} else {
$("#clearBtn1").removeClass("show");
}
}
.clearBtn {
position: relative;
left: 0;
transition: left 0.3s;
visibility: hidden;
}
.show {
left: -18px;
visibility: visible;
}
http://jsfiddle.net/qgy8Ly5L/19/
http://jsfiddle.net/qgy8Ly5L/19/
By using visibilityyou get to keep the element in the DOM. This will keep things smooth when it reappears. Notice the use of a "truthy" if statement.
通过使用visibility您可以将元素保留在 DOM 中。当它再次出现时，这将使事情保持顺利。请注意“真实”if 语句的使用。
