如何在纯CSS中显示关闭按钮[重复]

问题描述 投票：0回答：1

请参阅此代码：

https://codepen.io/manuchadha/pen/PBKYBJ

我已经创建了一个表格。我希望能够使用文件上传输入上传图像。选择图像时，我想在文件选择器框下方显示图像的缩略图，并在图像的右上角显示一个关闭（x）符号，可用于删除图像。

我正在尝试按照此示例（https://codepen.io/brissmyr/pen/egidw）使用CSS（而不是字体）创建

X
，但我无法创建它。我究竟做错了什么？我所看到的只是图像框顶角的两个垂直条，但它们没有变换 45 度。我怀疑这可能是 CSS 转换问题，但我可能是错的。

代码是

/*handler for file upload*/
function handleFileSelect() {
  console.log("got file upload event:");
  /*
   FileList object is the object returned as a result of a user selecting files using the <input> element,
   from a drag and drop operation's DataTransfer object, or from the mozGetAsFile() API on an HTMLCanvasElement.
   */
  var files = document.getElementById('question-file-upload').files; //event.target.files;
  console.log("files selected:" + files + ", total selected: " + files.length);
  for (var i = 0; i < files.length; i++) {
    console.log("files name:" + files[i].name)
    console.log("files object:" + files[i])
  }

  //working with only 1 file at the moment
  var file = files[0];

  if (files && file) {
    /*
    The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer,
    using File or Blob objects to specify the file or data to read.
     */
    var reader = new FileReader();

    /*bind onload event of FileReader to _handleReaderLoaded
    onload is a handler for the load event. This event is triggered by FileReader each time the reading operation is successfully completed.
     */
    reader.onload = this._handleReaderLoaded.bind(this);

    reader.readAsBinaryString(file);
  }
}

function _handleReaderLoaded(readerEvt) {
  var binaryString = readerEvt.target.result;
  var base64textString = btoa(binaryString);
  console.log(btoa(binaryString));
  var src = "data:image/png;base64,";
  src += base64textString;

  var newImage = document.createElement('img');
  newImage.src = src;
  newImage.width = newImage.height = "80";
  var closeButtonLink = document.createElement('a');
  /*closeButtonLink.textContent = "x";*/
  /*dont want font*/
  closeButtonLink.setAttribute('href', "#");
  closeButtonLink.classList.add("close");
  document.querySelector('#imageContainer').appendChild(newImage);

  document.querySelector('#imageContainer').appendChild(closeButtonLink);

}
body {
  margin: 0px;
}

.body__div--background {
  background: linear-gradient(45deg, #33b1f8 37%, #6e90f6 100%);
  /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
  color: #555555;
  font-family: Helvetica;
  line-height: 1.5;
  font-size: 11px;
  letter-spacing: 0.25px;
}

#submit-practice-question-button {
  display: block;
}

#imageContainer {
  display: inline-block;
  border: 1px solid black;
}

.close {
  position: relative;
  margin: 0px;
  padding: 0px
  /*right: 80px;
      top:80px;
      width: 32px;
      height: 32px;
      */
  opacity: 0.3;
}

.close:hover {
  opacity: 1;
}

.close:before,
.close:after {
  /*position: relative;*/
  /*left: 15px;*/
  border: 1px solid black;
  top: 0px;
  right: 80px;
  content: ' ';
  /*height: 33px;*/
  width: 2px;
  background-color: #333;
}

.close:before {
  transform: rotate(45deg);
}

.close:after {
  transform: rotate(-45deg);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <base href="">
  <title>Example</title>
  <!--meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"-->
  <link rel="stylesheet" media="screen" href="fiddle.css">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="fiddle.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</head>

<body>
  <!--a href="#" class="close"></a-->

  <div id="form-div" class="body__div--background">
    <form id="new-question-form" class="practice-question-form" [formGroup]="practiceQuestionForm" (ngSubmit)="addPracticeQuestion()" novalidate>

      <div class="form-group">
        <label for="file-upload" class="control-label required">Upload files</label>
        <div class="custom-file" id="file-upload" lang="es">
          <input type="file" class="custom-file-input" id="question-file-upload" multiple onchange="handleFileSelect(this.files)">

          <label style="width:50%" class="custom-file-label" for="question-file-upload"></label>


        </div>

      </div>
      <div id="imageContainer"></div>
      <button type="submit" id="submit-practice-question-button" class="content-div__button--blue"> Submit! </button>
    </form>
  </div>
</body>

javascript html css css-animations
1个回答
0
投票

伪元素默认是内联的，所以你必须应用 display: block 或 display: inline-block 来转换它们，请检查下面的代码片段

/*handler for file upload*/
function handleFileSelect() {
  console.log("got file upload event:");
  /*
   FileList object is the object returned as a result of a user selecting files using the <input> element,
   from a drag and drop operation's DataTransfer object, or from the mozGetAsFile() API on an HTMLCanvasElement.
   */
  var files = document.getElementById('question-file-upload').files; //event.target.files;
  console.log("files selected:" + files + ", total selected: " + files.length);
  for (var i = 0; i < files.length; i++) {
    console.log("files name:" + files[i].name)
    console.log("files object:" + files[i])
  }

  //working with only 1 file at the moment
  var file = files[0];

  if (files && file) {
    /*
    The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer,
    using File or Blob objects to specify the file or data to read.
     */
    var reader = new FileReader();

    /*bind onload event of FileReader to _handleReaderLoaded
    onload is a handler for the load event. This event is triggered by FileReader each time the reading operation is successfully completed.
     */
    reader.onload = this._handleReaderLoaded.bind(this);

    reader.readAsBinaryString(file);
  }
}

function _handleReaderLoaded(readerEvt) {
  var binaryString = readerEvt.target.result;
  var base64textString = btoa(binaryString);
  console.log(btoa(binaryString));
  var src = "data:image/png;base64,";
  src += base64textString;

  var newImage = document.createElement('img');
  newImage.src = src;
  newImage.width = newImage.height = "80";
  var closeButtonLink = document.createElement('a');
  /*closeButtonLink.textContent = "x";*/
  /*dont want font*/
  closeButtonLink.setAttribute('href', "#");
  closeButtonLink.classList.add("close");
  document.querySelector('#imageContainer').appendChild(newImage);

  document.querySelector('#imageContainer').appendChild(closeButtonLink);

}
body {
  margin: 0px;
}

.body__div--background {
  background: linear-gradient(45deg, #33b1f8 37%, #6e90f6 100%);
  /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
  color: #555555;
  font-family: Helvetica;
  line-height: 1.5;
  font-size: 11px;
  letter-spacing: 0.25px;
}

#submit-practice-question-button {
  display: block;
}

#imageContainer {
  display: inline-block;
  border: 1px solid black;
}

.close {
  position: relative;
  margin: 0px;
  padding: 0px
  /*right: 80px;
      top:80px;
      width: 32px;
      height: 32px;
      */
  opacity: 0.3;
}

.close:hover {
  opacity: 1;
}

.close:before,
.close:after {
  /*position: relative;*/
  /*left: 15px;*/
  border: 1px solid black;
  top: 0px;
  right: 80px;
  content: 'X';
  /*height: 33px;*/
  width: 2px;
  display: inline-block;
  background-color: #333;
}

.close:before {
  transform: rotate(45deg);
}

.close:after {
  transform: rotate(-45deg);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <base href="">
  <title>Example</title>
  <!--meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"-->
  <link rel="stylesheet" media="screen" href="fiddle.css">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="fiddle.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</head>

<body>
  <!--a href="#" class="close"></a-->

  <div id="form-div" class="body__div--background">
    <form id="new-question-form" class="practice-question-form" [formGroup]="practiceQuestionForm" (ngSubmit)="addPracticeQuestion()" novalidate>

      <div class="form-group">
        <label for="file-upload" class="control-label required">Upload files</label>
        <div class="custom-file" id="file-upload" lang="es">
          <input type="file" class="custom-file-input" id="question-file-upload" multiple onchange="handleFileSelect(this.files)">

          <label style="width:50%" class="custom-file-label" for="question-file-upload"></label>


        </div>

      </div>
      <div id="imageContainer"></div>
      <button type="submit" id="submit-practice-question-button" class="content-div__button--blue"> Submit! </button>
    </form>
  </div>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.