Javascript 无法在纯css中显示关闭按钮
Javascript 无法在纯css中显示关闭按钮,javascript,html,css,css-animations,Javascript,Html,Css,Css Animations,请检查这个代码
我已经创建了一个表单。我想能够上传一个使用文件上传输入图像。选择图像时，我希望在文件选择器框的正下方显示图像的缩略图，并在图像的右上角显示可用于删除图像的闭合x符号
我试图按照这个例子创建一个使用css而不是字体的X，但我无法创建它。我做错了什么？我看到的只是图像框上角的两个垂直条，但它们没有45度的变换。我怀疑这可能是css转换问题，但我可能错了
代码是
/*文件上载处理程序*/
函数handleFileSelect{
console.loggot文件上载事件：；
/*
Fi
请检查这个代码
我已经创建了一个表单。我想能够上传一个使用文件上传输入图像。选择图像时，我希望在文件选择器框的正下方显示图像的缩略图，并在图像的右上角显示可用于删除图像的闭合x符号
我试图按照这个例子创建一个使用css而不是字体的X，但我无法创建它。我做错了什么？我看到的只是图像框上角的两个垂直条，但它们没有45度的变换。我怀疑这可能是css转换问题，但我可能错了
代码是
/*文件上载处理程序*/
函数handleFileSelect{
console.loggot文件上载事件：；
/*
FileList对象是用户使用元素选择文件时返回的对象，
从拖放操作的DataTransfer对象，或从HtmlCanvaElement上的mozGetAsFile API。
*/
var files=document.getElementById'question-file-upload'.files；//event.target.files；
console.logfiles selected:+files+，total selected:+files.length；
对于变量i=0；i默认情况下，伪元素是内联的，所以必须应用display:block或display:inline块来转换它们，请选中下面的代码段
/*文件上载处理程序*/
函数handleFileSelect{
console.loggot文件上载事件：；
/*
FileList对象是用户使用元素选择文件时返回的对象，
从拖放操作的DataTransfer对象，或从HtmlCanvaElement上的mozGetAsFile API。
*/
var files=document.getElementById'question-file-upload'.files；//event.target.files；
console.logfiles selected:+files+，total selected:+files.length；
对于变量i=0；i顺便说一句，通过在谷歌逐字输入你的问题标题，可以很容易地找到重复的问题。我怀疑问题是css转换，但似乎不是。基本上，我试图复制一段代码，在纯css中创建一个X，但无法做到这一点。我想这可能是转换的问题，但可能不是。这是另外一回事，但我不知道你的伪元素没有高度，所以你在这里旋转的基本上是两个小正方形，所以你看不到太多的效果。谢谢。你对身高的评论是相关的，但还有一个问题。只有当我给伪元素position:absolute，也就是说，close:before，.close:after{position:absolute}时，我才能对它们进行变换。如果没有这个，我只能看到竖条。解决方案是，我给imageContainer一个相对位置，然后我给伪元素绝对位置，并设置为95，因为图像是80，高度是31，所以80+15=95，几乎居中。但我不明白为什么立场：绝对是重要的。你知道吗？我已经更新了代码-“但是我不明白为什么位置：绝对是重要的。你知道吗？”-因为这里给出的答案中解释了什么，还有重复的…绝对位置不是这个工作所必需的，它只是隐式地解决了这个问题。谢谢，但它不起作用。我不想在内容中使用X。如果您检查我尝试复制的示例，该示例使用纯css，不使用内容。您想检查transform属性是否正常工作？在这里它可以工作，如果你不想在内容中使用X，那么就把它删除。我怀疑我的代码不工作是因为转换不工作，但事实并非如此。我现在编辑了描述