Hi I am trying to make my DropDownList like this in my ASP.NET web application.
I cant't use the select tag because I am already bounded some data to the DropDownList.
Basically I am trying to remove the default arrow button from the DropDownList and add this image as background. There is any way to do this using CSS.
This is the css I have used
.drop-down-style
{
width:150px;
height:20px;
border:solid 2px #a3a4a6;
background-image:url('../Images/DropDownImage.gif');
}
Something like this?
CSS:
.styled-select {
width: 308px;
height: 23px;
overflow: hidden;
background:url(arrow_xs.png) no-repeat 225px #FFF;
border: 1px solid #ccc;
}
.styled-select select {
background: transparent;
width: 309px;
padding-right: 4px;
padding-bottom:7px;
padding-left: 4px;
padding-top: 0px;
font-size: 12px;
line-height: 1;
border: none;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
HTML
<div class="styled-select">
<select>
<option>First option</option>
<option>Second option</option>
</select>
</div>
edit: You can add an arrow with positioning (div).
edit I put this in a jsfiddle for you: http://jsfiddle.net/X4J3L/1/
rather then use some third party plugins or jquery scripts , you should use ajax toolkit's combo box. see an example here
Combo box example
Related
Well, I have two buttons (in Spanish) and these buttons are inside an 'a' (link tag) so that:
<div class="MB789">
<button class="B121">Ya soy miembro</button>
<button class="B122">Quiero unirme</button>
</div>
The purpose of the 'a' is obviously to redirect the user to the respective page and the buttons are for the style (yes, I want the user to see buttons and not links)
In the CSS I wrote the following:
.MB789{
display: table;
padding: 10px;
text-align: center;
}
.MB789 button{
border: none;
border: 1px solid black;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
.MB789 a{
margin: 10px;
background: red; /*Debug: to visualize the elements 'a'*/
}
This is the result:
And that's the problem, that the 'a' elements stand out from the buttons.
And this is what happens when I tell the elements to show themselves as a table.
.MB789 a{
display: table;
background: red; /*Debug: to visualize the elements 'a'*/
}
Then this is what happens:
What I want is that 'a' elements do not protrude from the buttons, but that when the user click on a button, be redirected to the respective link.
Note: I know that Javascript can be redirected, but I refrain from doing this using that language because the user can disable Javascript from the browser settings.
Firstly, you cannot nest <button></button> elements inside an <a> tag, that is invalid markup. Please see why here: Can I nest a <button> element inside an <a> using HTML5?
Secondly you can style the <a> tag like a button and this will resolve your problem.
Your HTML markup needs to look like this:
<div class="MB789">
Ya soy miembro
Quiero unirme
</div>
Your CSS would look like this:
.MB789{
display: inline-block;
padding: 10px;
text-align: center;
}
.MB789 a{
display: inline-block;
border: 1px solid black;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
You've put a 10px margin on the buttons, because they're inside of the a tags this margin will be between the buttons and the edge of the a tags, making them protrude out from the button. Try removing that margin:
.MB789 button{
border: none;
border: 1px solid black;
padding: 10px 20px;
cursor: pointer;
}
Styling a select that works in a regular browser. But when using the same select for a mobile (emulated in chrome) it looks like in the picture. Is there something i can to do make the select show all the options and also make it get rid of the black field, as in pic 2?
Pic 2:
<div class="styled-select">
<select id="TimeFrom" name="TimeFrom">
<option>08.00</option>
<option>09.00</option>
<option>10.00</option>
<option>11.00</option>
<option>12.00</option>
...
</select>
</div>
.styled-select select {
background: transparent;
width: 200px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
.styled-select {
width: 170px;
height: 34px;
overflow: hidden;
background: url(/Content/down_arrow_select.jpg) no-repeat right #ddd;
border: 1px solid #ccc;
}
Turned out it was just something wrong with googles emulator. When i tried it in an iPad it as it should.
You may feel it is a repeated question, but I have a Asp:DropDownList which needs to be styled like the below picture.
I browsed through Google and some sites (mentioned in Stack), but I couldn't get the expected outcome.
Can anybody help me in this?
Thanks in advance..
Try the following code
HTML
<asp:DropDownList ID="DropDownList1" runat="server" Width="120px" BackColor="#F6F1DB" ForeColor="#7d6754" Font-Names="Andalus" CssClass="ddl">
<asp:ListItem Text="DEPART FROM"></asp:ListItem>
</asp:DropDownList>
CSS
EDIT
<style type="text/css">
.ddl
{
border:2px solid #7d6754;
border-radius:5px;
padding:3px;
-webkit-appearance: none;
background-image:url('Images/Arrowhead-Down-01.png');
background-position:88px;
background-repeat:no-repeat;
text-indent: 0.01px;/*In Firefox*/
text-overflow: '';/*In Firefox*/
}
</style>
Check the screenshot which I got in Chrome also I am attaching the dropdown down arrow image(Arrowhead-Down-01.png).Hope this helps you.
Screenshot
Arrowhead-Down-01.png
HTML select solution
HTML
<div class="styled-select">
<select>
<option>DEPART FROM</option>
<option>DEPART TO</option>
<option>DEPART AWAY</option>
</select>
</div>
CSS
.styled-select {
width: 150px;
height: 30px;
overflow: hidden;
background: url('Images/Arrowhead-Down-01.png') no-repeat right #F6F1DB;
border: 2px solid #7d6754;
border-radius: 5px;
}
.styled-select select {
background: transparent;
width: 180px;
padding: 3px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 30px;
-webkit-appearance: none;
font-family:Andalus;
color:#7d6754;
}
I am trying to style my css dropdown box using only css...
First of all my dropdown have the custom html arrow down, i am trying to put an image on my css to take this default arrow down so i can put my own image to it but i have no idea how to do it...
This is my css for the dropdown box:
select {
height:32px;
line-height:42px;
width: 88%;
}
How can i put my own image to this code? I also tried following tutorial but its no use for me i can't make it work right...
http://bavotasan.com/2011/style-select-box-using-only-css/
The tutorial works for me very well.
I created a fiddle for you to understand, but you have to understand what the author want to say.
HTML code
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
CSS code
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url('http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg') no-repeat right #ddd;
border: 1px solid #ccc;
}
.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
http://jsfiddle.net/zNCBY/
I'm using the combobox control:
http://demos.telerik.com/aspnet-mvc/razor/ComboBox?theme=vista
And I want it to be not white, like it is now. Which css property can do this? Is it possible?
I want it to look like this:
You should be able to achieve that with a custom background color on the select element and some rounded corners on its container. Try placing the combobox in a containing DIV and give it these CSS styles:
.rounded {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 5px;
background: #333;
}
.rounded select {
width: 100%;
background: #333;
color: #fff;
border: 0;
outline: 0;
}
http://jsfiddle.net/mpHgR/1/
It might be a little off, but it's close to what you want.