У меня есть FileUpload Control, как этот
<asp:FileUpload ID="fileuploader" runat="server" />
Теперь я хочу применить css только к части кнопки "Обзор"
Как я могу это сделать?
У меня есть FileUpload Control, как этот
<asp:FileUpload ID="fileuploader" runat="server" />
Теперь я хочу применить css только к части кнопки "Обзор"
Как я могу это сделать?
Укладка тега input
с помощью type="file"
требует некоторой работы, браузеры не ведут себя одинаково, когда вы пытаетесь стилизовать их, к сожалению.
Есть несколько способов сделать это, хотя:
видимо, вы не можете напрямую их подстроить с помощью CSS, но вы можете "взломать" новый стиль в них. Подробнее читайте в следующей статье.
Возможно, вы можете изменить элемент управления FileUpload
, используя следующий код.
Шаг 1: измените элемент управления FileUpload с помощью этого кода на странице aspx
<label class="file-upload">
<span><strong>Upload Image</strong></span>
<asp:FileUpload ID="FileUpload1" runat="server" >
</asp:FileUpload>
</label>
Шаг 2: добавьте ниже CSS-код в ваш основной файл CSS
.file-upload {
display: inline-block;
overflow: hidden;
text-align: center;
vertical-align: middle;
font-family: Arial;
border: 1px solid #124d77;
background: #007dc1;
color: #fff;
border-radius: 6px;
-moz-border-radius: 6px;
cursor: pointer;
text-shadow: #000 1px 1px 2px;
-webkit-border-radius: 6px;
}
.file-upload:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
background: -moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
background-color: #0061a7;
}
/* The button size */
.file-upload {
height: 30px;
}
.file-upload, .file-upload span {
width: 90px;
}
.file-upload input {
top: 0;
left: 0;
margin: 0;
font-size: 11px;
font-weight: bold;
/* Loses tab index in webkit if width is set to 0 */
opacity: 0;
filter: alpha(opacity=0);
}
.file-upload strong {
font: normal 12px Tahoma,sans-serif;
text-align: center;
vertical-align: middle;
}
.file-upload span {
top: 0;
left: 0;
display: inline-block;
/* Adjust button text vertical alignment */
padding-top: 5px;
}
Сделано.
Проверьте это видео, вы должны добавить дополнительную кнопку, но она работает https://youtu.be/_O9YVO-Z-Xo