Question

Basiaclly，我正在尝试为我的网站制作一个上传表单。我想知道是否有CSS可以使外观看起来更令人愉悦和独特。下面的代码仅是HTML。我只需要CSS，但是如果您发现任何改进HTML的方法，请告诉我。

 <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Form</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
        <script src="script.js"></script>

        <form action = "index.php" method="post" enctype="mutlipart/form-data">

        <label for="file">Choose a file:</label>

        <input type="file" name="file1"/>

        <input type="submit" value="send!"/>

        </form>



      </body>
    </html>

Answer 1

您可以改进的一种方法是将<input type="submit" value="send!"/>代码更改为<button id="" class="" type="submit">Your Text Here</button>。同样对于类似按钮的css代码，我建议使用类似这样的

ButtonIDHere {
  border-radius: 25px;
  border: 4px solid blue;
  padding: 10px;
}

为了使输入更好用

.InputClass {
  position: absolute;
  width: 150px;
  top: 150px;
  left: 730px;
  z-index: 4;
}

还可以更改边框的颜色和内容。

Answer 2

哟，所以您实际上想看到什么，我只是使表格居中并添加了一些颜色。您是否希望按钮看起来更好？ https://jsfiddle.net/jqc05Ldk/5/

.container{
width: 50%;
margin: 0 auto;
padding: 24px 24px;
background-color: #57b3e4;
height: auto;
  color: #BBDEF0;
      border-radius: 25px;

}

input[type="submit"]{
    border-radius: 25px;
border: 4px #00A6A6 solid;
background-color: #00A6A6;
color:#BBDEF0;
cursor:pointer;

}

input[type="submit"]:hover{
color: #00A6A6;
background-color: #BBDEF0;

}

Answer 3

对于这些类型的文件输入，您可以在bootstrap中使用表单控件，它不包含太多外部css，因为bootstrap是一个css框架，并且当我们使用bootstrap时按钮样式也很不错。包括“发送”按钮后的警报。尝试使用引导程序执行此类表单

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Form</title>
     <style>
    .container{
      width: 300px;
      height: 150px;
      border: 1px solid black;
      border-radius: 25px;

    }
    </style>
    <script type="text/javascript">
  function showMessage(){
    alert("Thanks Your papers have been evaluated");
  }
</script>
  </head>
  <body>


    <form action = "index.php" method="post" enctype="mutlipart/form-data">
  <div class="container mt-4 mb-2">
    <form>
   <div class="form-group mt-2">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
<button type="submit" onclick = "showMessage()"class="btn btn-primary mt-2">send </button>
</div>
</form>

有什么方法可以向此表单代码添加漂亮的CSS效果吗？

3 个答案: