Styling asp:DropDownList with CSS - c#

I have created a small CSS, which I wanted to use to make my own styled DropDownList. I don't know if there is some sort of incompatibility and I'm still learning CSS and ASP.net, but when I tried my code in an online CSS tester, it worked perfectly.
.select {
padding: 3px;
margin: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
box-shadow: 0 3px 0 #212121, 0 -1px #191919 inset;
background: #333;
color: #fff;
border: none;
outline: none;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
select {
padding-right: 18px;
}
}
label {
position: relative;
}
label:after {
content: '<>';
font: 11px "Consolas", monospace;
color: #fff;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: 8px;
top: 2px;
padding: 0 0 2px;
border-bottom: 1px solid #ddd;
position: absolute;
pointer-events: none;
}
label:before {
content: '';
right: 6px;
top: 0px;
width: 20px;
height: 20px;
background: #333;
position: absolute;
pointer-events: none;
display: block;
}
This is my DropDownList:
<asp:DropDownList CssClass="select" id="DropPoke1" Width="80" runat="server" AutoPostBack="true" ViewStateMode="Enabled" EnableViewState="true" OnSelectedIndexChanged="DropPoke1_SelectedIndexChanged" />
Unfortunately, this does not work. Have I done something wrong or is it just not possible?
Edit: After adding the following line to my aspx, it worked:
<link href="CustomDropDown.css" rel="stylesheet" type="text/css" />


This is working fine. Please make sure you have properly included style sheet.


IF you are not calling your element by own created classes, you may need to inspect with chrome (or similar) your html.
calling the css by generic tags as "label" often won't work as a asp:Label use to be translated into an html span, not a html label

Related

Clicking this button in C# selenium

How do I click this specific button in selenium in C#
I tried the a tag but it doesn't work
<a class="btn-primary" href="http://myjunkyard.co.za/confirm" itemprop="url" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 16px; color: #FFF; text-decoration: none; line-height: 2em; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; border-radius: 30px; background-color: #201D19; margin: 0; padding: 5px 30px;" target="_blank">Confirm email address</a>

You can try locating this element with this XPath:
"//a[contains(#href,'http://myjunkyard.co.za/confirm')]"
Or this
"//a[text()='Confirm email address']"

White space under footer page on website

I have a white space under my website.
http://braulionova-001-site18.atempurl.com/DirectorioMedico.aspx
I check css, break tags.
Some pages are fine but other have this white space under footer page.

Looks like the element .autocomplete_completionListElement has a visibility: hidden with height 200px.
visibility: hidden keeps the element there, with height and width but turns it invisible. Seems like you don't want it there since you tried hiding it. To get rid of it just use display: none.

you have a class in a your css named autocomplete_completionListElement which has a been given a height of 200px. try commenting the height and check as givne below. Hope this helps.
.autocomplete_completionListElement {
visibility: hidden;
margin: 0px !important;
background-color: White;
background: white;
color: windowtext;
border: buttonshadow;
border-width: 1px;
border-style: solid;
cursor: 'default';
overflow: auto;
/* height: 200px; */
text-align: left;
list-style-type: none;
}
Hope this helps.

The problem is because of the element with class .autocomplete_completionListElement.
Update your code with the code below. It will work fine.
.autocomplete_completionListElement {
/*visibility: hidden;*/
display: none;
margin: 0px !important;
background-color: White;
background: white;
color: windowtext;
border: buttonshadow;
border-width: 1px;
border-style: solid;
cursor: 'default';
overflow: auto;
height: 200px;
text-align: left;
list-style-type: none;
}

Try to This CSS code..
.footer
{
background:#333333;
color:#848484;
font-size:12px;
font-size:12px;
font-family:Open Sans,sans-serif;
font-weight:bold;
text-align:center;
padding:7px 50px 10px 0px;
vertical-align:middle;
margin-top:10px;
}

How to make a white popup text box appear after clicking a button?

so right now, I have many buttons on a webpage. Most of these buttons contain one url which when clicked directly sends you to the webpage with the url. Some buttons, however, consist of multiple urls. For these buttons, I would like a white text box with the list of urls to appear after the user clicks the button. Separating these multiple urls buttons into single url buttons is not an option.
I've looked into System.Windows.Forms.MessageBox. but that does not produce desirable results.
I appreciate any help I can get. Thanks in advance.

hidden checkbox css:
html {
width: 100%;
height: 100%;
background: indigo;
text-align: center;
font-family: arial, sans-serif;
}
a, a:active, a:visited, a:focus {
text-decoration: none;
font-weight: bold;
color: indigo;
}
input {
display: none;
}
#target {
display: none;
}
#click:checked ~ label > #target {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
display: inline-block;
height: 80%;
width: 80%;
background-color: white;
outline: 6px double white;
}
.item {
color: white;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
.warning {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left:0;
right:0;
margin: auto;
}
<input type="checkbox" id="click" name="click" value="click" />
<label for="click">
<p class="item"><b>google.com</b></p>
<div id=target class="item"><div class=warning>
images.google.com<br>
maps.google.com<br>
drive.google.com</div></div>
</label>

styling the asp:fileupload control

I have a file upload control in asp.net like so:
<asp:FileUpload ID="File1" runat="server" Font-Size="Small" Width="100%" />
For some reason the Browse... button does not apply the standard CSS that I have applied to any input[type="button"] controls.
How can I apply the same CSS to the Browse button of that control?

try this
<input type="file" class="hidden" id="uploadFile"/>
<div class="button" id="uploadTrigger">Browse</div>
some css
.hidden {
display:none;
}
.button {
border: 1px solid #333;
padding: 10px;
margin: 5px;
background: #777;
color: #fff;
width:75px;
}
JS
$("#uploadTrigger").click(function(){
$("#uploadFile").click();
});
Demo

Since the OP was about ASP.NET and the accepted answer was HTML / javascript, I thought I'd answer it in ASP.NET terms:
ASP.NET portion:
<asp:FileUpload ID="fileUpload" runat="server" style="display:none" />
<input type="button" value="Select your file" id="browse"></input>
JQuery, with jQuery UI for .button() portion:
$("input:button").button();
...
$("#browse").click(function () {
$("#<%= fileUpload.ClientID %>").click();
});

in aspx form:
<div class="fileupload-group">
<button type="button" runat="server" id="btnFileupload" class="btnFileupload btnRed">
Select File <i class="fa fa-folder-open"></i>
<asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="True" />
</button>
<input type="text" runat="server" id="txtFileuploadName" class="fileupload-name txtRight" readonly="readonly" />
</div>
and in javascript
$('input[id="<%= FileUpload1.ClientID %>"]').change(function () {
var names = [];
var length = $(this).get(0).files.length;
for (var i = 0; i < $(this).get(0).files.length; ++i) {
names.push($(this).get(0).files[i].name);
}
if (length > 2) {
$("#<%=txtFileuploadName.ClientID%>").attr("value", length + " selected files");
}
else {
$("#<%=txtFileuploadName.ClientID%>").attr("value", names);
}
});
and in css:
/* txtRight ----------------------------*/
.txtRight {
display: inline-block;
margin-bottom: 3px;
border: 1px solid #CCC;
background-color: #FFF;
font-size: 14px;
line-height: 20px;
color: #555;
vertical-align: middle;
position: relative;
font-weight: normal;
padding: 2px 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px #000000;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px #000000;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-ms-box-shadow: inset 0 1px 1px #000000;
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px #000000;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
-ms-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
}
.txtRight:focus {
border-color: #52a8ec;
border-color: rgba(82,168,236,0.8);
outline: 0;
-webkit-box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
-moz-box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
-ms-box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
}
.txtRight {
font-family: iransans !important;
font-weight: normal !important;
direction: rtl;
text-align: right;
margin-right: 0;
top: 0;
right: 0;
}
.txtRight:disabled {
background-color: #f7f7f7 !important;
}
select.txtRight {
padding: 1px 2px !important;
font-size: 13px !important;
}
/* --------------------------------------*/
/* btnRed ------------------------------ */
.btnRed, a.btnRed {
-ms-text-shadow: none;
text-shadow: none;
background: #ed1c24;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
.btnRed:hover, .btnRed:focus, .btnRed, .btnRed:visited, .btnRed:disabled,
a.btnRed:hover, a.btnRed:focus, a.btnRed, a.btnRed:visited, a.btnRed:disabled, a.btnMoulinexRed:link {
border: none;
color: white;
text-decoration: none;
padding: 5px;
font-family: iransans;
font-weight: normal;
font-size: 12px;
cursor: pointer;
}
.btnRed:hover, .btnRed:hover:enabled, .btnRed:focus, .btnRed:focus:enabled,
a.btnRed:hover, a.btnRed:hover:enabled, .btnRed:focus, a.btnRed:focus:enabled {
background: #830022;
background-color: #830022 !important;
color: white !important;
}
.btnRed:visited, .btnRed:link, /*a.btnRed, */
a.btnRed:visited, a.btnRed:link {
background: #ed1c24;
background-color: #ed1c24;
color: white;
}
.btnRed:active, .btnRed:active:enabled,
a.btnRed:active, a.btnRed:active:enabled
{
background: #e6e6e6 !important;
background-color: #e6e6e6 !important;
color: #333 !important;
}
.btnRed:disabled,
a.btnRed:disabled, a.aspNetDisabled {
color: #333 !important;
background-color: #D6D1D1 !important;
}
/* --------------------------------------*/
/* FileUpload ---------------------------*/
.fileupload-group {
position: relative;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
margin-top: 3px;
margin-bottom: 8px;
}
.fileupload-group .fileupload-name {
display: inline-block;
position: relative;
width: 67%;
margin-bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btnFileupload {
display: inline-block;
position: relative;
white-space: nowrap;
width: 17%;
vertical-align: middle;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-ms-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.fileupload-group .btnUpload {
width: 15%;
vertical-align: middle;
}
.fileupload-name {
padding: 0;
width: 100%;
white-space: nowrap;
height: 29px;
padding: 4px 12px;
font-size: 14px;
}
.fileupload-name.txtRight {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-border-top-right-radius: 0 ;
border-top-right-radius: 0;
-ms-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
display: inline-block;
margin-right: -6px;
}
.fileupload-name.txtRight {
background-color:#FFF;
-ms-opacity: 1;
opacity: 1;
border: 1px solid #ffaaaa;
}
.fileupload-name.txtRight:disabled {
background-color:#FFF;
-ms-opacity: 1;
opacity: 1;
border: 1px solid #ccc;
}
.fileupload-group input[type=file] {
display:inline-block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-ms-opacity: 0;
opacity: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* --------------------------------------*/
Make sure to use the latest browser version to run

Applying css on asp.net FileUpload Control's Browse Button only

I have a FileUpload Control like this
<asp:FileUpload ID="fileuploader" runat="server" />
Now I want to apply css only on the Browse button part
How can I do this?

Styling an input tag with type="file" requires a bit of work, browsers don't behave similarly when you try to style them unfortunately.
There are a few methods of doing so though:
http://www.quirksmode.org/dom/inputfile.html
http://www.appelsiini.net/projects/filestyle

This is possible you can change the FileUpload control using following code.
Step 1: Change FileUpload control with this code on aspx page
<label class="file-upload">
<span><strong>Upload Image</strong></span>
<asp:FileUpload ID="FileUpload1" runat="server" >
</asp:FileUpload>
</label>
Step 2: now add below CSS code into your main CSS file
.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;
}
It's done.

apparently you cannot style them directly with CSS but you can "hack" a new style into them - read the following article for details
http://www.quirksmode.org/dom/inputfile.html

Categories

Resources