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
Related
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;
}
Textbox and button not aligned properly
Hi everyone, I'm facing problem here that my textbox and the button couldn't align properly. I tried to adjust the margin including margin top and margin bottom, they still stay exactly the same location. I am clueless on what's wrong here. Can you please help me?
Asp.Net:
<asp:Panel HorizontalAlign="center" runat="server">
<asp:TextBox ID="SearchTextBox" runat="server" placeholder=" Search your item here." CssClass="textbox"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" OnClick="SearchOnClick" CssClass="button-add" />
</asp:Panel>
Css:
.textbox {
border: 1px solid #848484;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 25px;
outline: none;
margin-bottom:10px;
height: 25px;
width: 350px;
background-color: #ede6e6;
}
.button-add {
background-image: url(../Images/button_searchSmall.gif);
background-size: auto;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center;
margin-top:20px;
color: transparent;
background-color: transparent;
outline: 1px;
border: none;
}
Add display: inline-block; vertical-align: middle; in .button-add and .textbox see here
Instead of using margin-bottom in the textbox class, you can use margin-bottom in the button-add class. That way x amount of margin will be left under button-add and then your textbox can come. Dont put any margin command in the textbox class.
Hope this helps!
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
I have created a menu control. There are main menu items and then static items. The menu control places a default arrow head pointing to the right. I wanted to change the direction, pointing downwards and also, it seems like the default menu control creates a separate td for the placement of the arrow. I didn't like this, because this actually places the arrow beyond the menu item.
So I disabled the default arrow and added my own.
// Create a new Menu control.
_MainNav = new Menu();
_MainNav.StaticEnableDefaultPopOutImage = false;
_MainNav.DynamicEnableDefaultPopOutImage = false;
_MainNav.StaticPopOutImageUrl = "~/App_Themes/Images/Arrow.png";
_MainNav.DynamicPopOutImageUrl = "~/App_Themes/Images/Arrow.png";
This fixed the direction of the arrow. From pointing to the right, now it points downwards.
However the arrow is still placed in a new td.... there is a gap between the menu item and the arrow indicating that there are child items. Visually it looks like that the arrow for one of the menu item is placed at the beginning of the next menu item.
Here is my css:-
div.nav
{
border: 1px solid #fff;
width: 960px;
border-bottom-width: 2px;
clear: both;
}
.menu
{
padding: 0;
margin: 0;
width: 960px;
background-color: #71cd7b;
display: inline-block;
border-bottom: 1px solid white;
font-size: 15px;
}
.menu tr
{
text-align: left;
padding: 0;
margin: 0;
list-style: none;
float: left;
}
.menu td
{
float: left;
padding: 0;
margin: 0;
white-space: nowrap;
}
.menu td a
{
float: left;
width: 134px;
height: 25px;
padding-top: 10px;
text-indent: 15px;
color: #fff;
font-weight: bold;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
background-image: url(Images/divider.jpg);
background-position: right;
background-repeat: repeat-y;
}
.menu td a:hover
{
background-color: #7156a4;
font-size: 15px;
}
.menu td a.active
{
background-color: #7156a4;
font-size: 15px;
}
.subMenu
{
border:1px double Black;
border-width: thin;
}
.subMenuItem
{
background-color : white;
width: 160px;
margin-left:5px;
margin-top:2px;
margin-bottom:5px;
font-family:#Arial Unicode MS;
color:Black;
}
.subMenuItem:hover
{
background-color :#7156a4;
margin-left:5px;
margin-top:3px;
margin-bottom:2px;
margin-right:5px;
font-weight:bold;
color:White;
}
My HTML:-
<div id="nav" class="nav">
<asp:PlaceHolder ID="MenuPlaceHolder" runat="server" />
</div>
<div class="body_block">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
How can I move the arrow back a little bit to the left so that it falls in the same section of the menu and not at the beginning of the next section.
In my Windows application I would like to put an X at the right edge of a text box to clear it. Similar to what Google is using right now. Check out Google and do a search for anything. You'll see the X in the text box as soon as you've started typing something.
I know I can get away with just putting a button next to the text box. But I would like to do something a bit nicer.
Who says that google put an X in right end of text box....??
Thats not inside the google search text box. its outside of that textbox. and thats the onlyway you can do it. google use a table in which one td contains textbox while other contains 'X'. They've put some css which makes you feel like the X is inside textbox. Whixh is really not.
here is the html of google's search textbox:
<table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td class="gsib_a"><div style="position: relative; width: 100%; height: 25px;"><input type="text" maxlength="2048" name="q" id="lst-ib" class="gsfi" autocomplete="off" size="41" title="Search" value="mysql_num_rows" style="border: medium none; padding: 0pt 0pt 0pt 2px; margin: 0pt; width: 100%; outline: medium none; top: 1px; background: url("data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D") repeat scroll 0% 0% transparent; overflow: hidden; position: absolute; z-index: 5; color: transparent;" spellcheck="false" dir="ltr"><div class="gsfi" style="top: 1px; padding: 0pt; white-space: nowrap; position: absolute; width: 100%; color: silver; z-index: 0; text-align: left; left: 3px;" id="gs_tad0" dir="ltr"></div><div class="gsfi" style="position: absolute; top: 1px; background: none repeat scroll 0% 0% transparent; color: rgb(0, 0, 0); padding: 0pt; white-space: nowrap; z-index: 2; left: 3px;" dir="ltr">aol</div><div style="position: absolute; top: 1px; width: 1px; height: 20px; background-color: rgb(0, 0, 0); padding: 0pt; z-index: 4; left: 14px; visibility: hidden;"></div><div class="gsfi" style="position: absolute; top: 1px; background: none repeat scroll 0% 0% rgb(255, 255, 255); color: rgb(255, 255, 255); padding: 0pt; white-space: nowrap; z-index: 1;"></div></div></td><td><table cellspacing="0" cellpadding="0" style="width: 100%;" dir="ltr"><tbody><tr><td class="gsib_e"><div></div></td><td class="gsib_b" style="color: rgb(161, 185, 237);">×</td><td class="gsib_f"><div></div></td><td class="gsib_d"><div></div></td></tr></tbody></table></td></tr></tbody></table>
You could use custom painting to paint a little red icon on the rights side of you're control. Add some mouse click code to detect mouse clicks inside the little red icon to activate 'any' custom code.
um sorry dude but in my opinion u can only do this by adding a button ( even inside the textbox) and set it as when it is clicked it clears the textbox
textbox.Clear();
Good Luck to You , Wish u the best