html - 有什么方法可以为这个表单代码添加漂亮的 CSS 效果吗?

标签 html css

基本上,我正在尝试为我的网站制作一个上传表单。我想知道是否有任何 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>

最佳答案

您可以改进的一种方法是更改​​ <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;
}

也可能会更改边框颜色和内容。

关于html - 有什么方法可以为这个表单代码添加漂亮的 CSS 效果吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59221953/

相关文章:

javascript - 为什么我的响应式图片不起作用?

javascript - <head> 元素在 DOM 中是否始终可用,即使在 HTML 标记中不存在?

html - Bootstrap 4.1 悬停下拉菜单

responsive-design - 图像不响应浏览器大小

css - 谷歌浏览器 : Diagonal CSS line-through

css - 表格 td 中的图像占据了所有宽度

javascript - 动态添加下拉列表

Javascript:计算 DIV 减去像素的高度

html - 删除 .svg 图像上的浏览器抗锯齿功能

html - CSS 导入不起作用?