我正在尝试制作一个可以更改 dropdown 控件外观的 css 作为 label，同时同一页面中的其他一些 dropdown 将以其默认外观出现，但 dropdown 的 css 类名称将相同，为了实现这一点，我将 custom attribute 与控件一起使用，这与我在 css 中使用的相同。以下是示例代码。
这里我有两个 dropdown，我需要第一个显示为标签，第二个可以编辑。
我在第二个 dropdown 上添加了 custom attribute 以使其可编辑并且与我在 css 中使用的属性相同，但是 dropdown 向下箭头即使我用默认外观覆盖它， key 也没有出现。
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default4.aspx.vb" Inherits="Default4" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" title="test">
<title>TEST</title>
<style type="text/css">
.DropdownList, .DropdownListRequired {
border-radius: 5px;
-webkit-border-radius: 5;
font-family: Calibri,"Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 1px 1px 1px 1px;
border: none;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
color: #1E2935;
line-height: 1;
font-size: 13.5px;
background-color: transparent;
pointer-events: none;
-ms-user-select: none;
tab-index: -1;
cursor: default;
opacity: 0.55 !important;
-webkit-appearance: none;
-moz-appearance: button-arrow-down;
border: none;
}
.DropdownList[view=readonly-edit] {
-webkit-appearance: default-button;
-moz-appearance: button-arrow-down;
padding: 5px 2px 5px 2px;
border: 3px solid #2111f3;
color: #ff0000;
line-height: 1.4285;
pointer-events: auto;
-ms-user-select: auto;
cursor: auto;
background-color: white;
opacity: 1 !important;
}
</style>
<script lang="javascript" src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlSearchApplicationStatus" CssClass="DropdownList" runat="server" Width="170px">
<asp:ListItem>Test1</asp:ListItem>
<asp:ListItem>Test2</asp:ListItem>
<asp:ListItem>Test3</asp:ListItem>
<asp:ListItem>Test4</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDownList1" CssClass="DropdownList" runat="server" Width="170px" view="readonly-edit">
<asp:ListItem>Opt1</asp:ListItem>
<asp:ListItem>Opt2</asp:ListItem>
<asp:ListItem>Opt3</asp:ListItem>
<asp:ListItem>Opt4</asp:ListItem>
</asp:DropDownList>
<%--<asp:Button ID="Button1" runat="server" Text="Expire Cookie" OnClientClick="return ExpireCookie();" />--%>
</div>
</form>
</body>
第二个 dropdown 看起来像这样，我需要它以带有向下箭头的默认外观出现。
最佳答案
我遇到了问题，-webkit-appearance:default-button 应该是 -webkit-appearance:menulist。
.DropdownList[view=readonly-edit] {
-webkit-appearance: menulist;
-moz-appearance: menulist;
padding: 5px 2px 5px 2px;
border: 3px solid #2111f3;
color: #ff0000;
line-height: 1.4285;
pointer-events: auto;
-ms-user-select: auto;
cursor: auto;
background-color: white;
opacity: 1 !important;
}
关于jquery - 在 css 中覆盖系统样式外观在 asp.net 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45413474/