I am currently working on creating a CSS style that can modify the appearance of a dropdown control to look like a label, while allowing another dropdown on the same page to retain its default appearance. To achieve this, I am using a custom attribute with the controls and applying the same attributes in the CSS. Here is an example code snippet:
In this scenario, I have two dropdowns - the first one should display as a label and the second one should be editable.
I have added a custom attribute to the second dropdown to enable editing, but despite overwriting it with the default appearance, the dropdown arrow key does not appear.
<%@ 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>
The second dropdown is currently displaying incorrectly, lacking the down-arrow indicator which is necessary for user interaction. I aim to rectify this issue so it appears correctly with its default styling.