文件输入字段不是 100% 处于活动状态答案

【问题标题】：File input field is not 100% active文件输入字段不是 100% 处于活动状态
【发布时间】：2017-05-09 03:19:47
【问题描述】：

我有自定义文件附加字段。它工作正常，但有一点需要修复：该字段的右侧完全不活动。此外，如果您将光标移到左上角，您会注意到这部分显然是活动的，但 CSS“光标：指针”选项没有效果。很确定我错过了一些简单的事情，请告诉我我的错误是什么？先感谢您。 JSFiddle

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,500&subset=cyrillic');

* {
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
}

body {
  color: #fff;
  font-size: 18px;
  font-family: "Roboto";
  font-weight: 100;
  background: #333;
}

body a {
  color:#fff;
  text-decoration: none;
  outline: none;
}

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.file-area {
  width: 450px;
  box-sizing: border-box;
  position: relative;
}
.file-area input[type=file] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  cursor: pointer;
}
.file-area .file-dummy {
  width: 450px;
  padding: 30px;
  background: rgba(75, 58, 38, 0.3);
  border: 1px dashed rgba(255, 255, 255, 0.5);
  text-align: center;
  transition: background 0.3s ease-in-out;
}
.file-area .file-dummy .success {
  display: none;
}
.file-area:hover .file-dummy {
  background: rgba(255, 255, 255, 0.1);
}
.file-area input[type=file]:focus + .file-dummy {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline: -webkit-focus-ring-color auto 5px;
  outline: none;
}
.file-area input[type=file]:valid + .file-dummy {
  border-color: rgba(0, 255, 0, 0.4);
  background-color: rgba(0, 255, 0, 0.2);
}
.file-area input[type=file]:valid + .file-dummy .success {
  display: inline-block;
}
.file-area input[type=file]:valid + .file-dummy .default {
  display: none;
}

<div id="container">
  <div class="file-area">  
    <input type="file" name="files" id="files" required="required"/>
    <div class="file-dummy">
      <span class="default">Choose files</span>
      <span class="success">Yahoo!</span>
    </div>
  </div>
</div>

【问题讨论】：

因为你的.file-area 类有固定的宽度。
@KOKOC 我认为您必须删除 cursor: pointer 并将其设为默认值，因为左上角的文件浏览器会对指针产生影响，因此您必须使用相同的指针值。跨度>
感谢您和其他人，但这是在整个块上传播“光标：指针”效果的任何方式吗？如果我将指针悬停在左上角的框上，指针手指仍然会变成光标。

标签： html css file input field

【解决方案1】：

刚刚从.file-area 中删除了宽度，看起来工作正常。

============ 最新变化 ================

只是为了让cursor: pointer把戏改了font-size:0;

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,500&subset=cyrillic');

* {
    margin: 0;
    padding: 0;
}

body, html {
    height: 100%;
}

body {
	color: #fff;
	font-size: 18px;
	font-family: "Roboto";
	font-weight: 100;
	background: #333;
}

	body a {
		color:#fff;
		text-decoration: none;
		outline: none;
	}
	
#container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.file-area {
  box-sizing: border-box;
  position: relative;
}
.file-area input[type=file] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  cursor: pointer;
  font-size:0;
}
.file-area .file-dummy {
  width: 450px;
  padding: 30px;
  background: rgba(75, 58, 38, 0.3);
  border: 1px dashed rgba(255, 255, 255, 0.5);
  text-align: center;
  transition: background 0.3s ease-in-out;
}
.file-area .file-dummy .success {
  display: none;
}
.file-area:hover .file-dummy {
  background: rgba(255, 255, 255, 0.1);
}
.file-area input[type=file]:focus + .file-dummy {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline: -webkit-focus-ring-color auto 5px;
  outline: none;
}
.file-area input[type=file]:valid + .file-dummy {
  border-color: rgba(0, 255, 0, 0.4);
  background-color: rgba(0, 255, 0, 0.2);
}
.file-area input[type=file]:valid + .file-dummy .success {
  display: inline-block;
}
.file-area input[type=file]:valid + .file-dummy .default {
  display: none;
}

<div id="container">
	<div class="file-area">  
		<input type="file" name="files" id="files" required="required"/>
		<div class="file-dummy">
			<span class="default">Choose files</span>
			<span class="success">Yahoo!</span>
		</div>
	</div>
</div>

【讨论】：

感谢您和其他人，但这是在整个块上传播“光标：指针”效果的任何方式吗？如果我将指针悬停在左上角的框上，指针手指仍然会变成光标。
抱歉没有关注你。你现在想要什么？
我的错误，对不起。我做了一个解释性的截图：i.stack.imgur.com/Ma64z.png 如果你在左上角移动鼠标，光标会变成默认。 “光标：指针”的效果在这里消失了，但它适用于 DIV 的其余区域。我不知道该怎么做才能修复它。

【解决方案2】：

问题只是因为file-area类中的固定width，尝试删除宽度，希望它能解决您的问题

Updated Fiddle Demo

【讨论】：

【解决方案3】：

去掉.file-dummy的宽度应该可以解决

.file-area .file-dummy {
width: 450px;
}

【讨论】：

【解决方案4】：

将您的 .file-area 类宽度编辑为 100%

【讨论】：

在这种情况下，块向左移动，并且从右侧出现一个可点击的空间。无论如何，谢谢你的帮助。

【解决方案5】：

您添加padding 并应用width 100%，填充包括宽度。

这样改变宽度width: calc(100% - 60px);

.file-area .file-dummy {
    background: rgba(75, 58, 38, 0.3) none repeat scroll 0 0;
    border: 1px dashed rgba(255, 255, 255, 0.5);
    padding: 30px;
    text-align: center;
    transition: background 0.3s ease-in-out 0s;
    width: calc(100% - 60px);
}

【讨论】：