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.
I'm using IE 7 . can anyone suggest a simpler code for what I'm trying to do .
here's my html:
<span id="mainSpan" class="deleteIcon">
<input type="text" id="txt1" />
<span id="btn" onclick="var x = document.getElementById('txt1'); x.value = ''; x.focus();"></span>
</span>
and my css:
input {
font-size: 20px;
width: 250px;
}
#mainSpan {
position: relative;
border: 1px #aaa inset;
}
span.deleteicon span {
border: none;
margin-left: 1px;
position: absolute;
display: block;
top: 5px;
width: 18px;
height: 18px;
background: url('file:///path-to-clear.png') no-repeat center;
cursor: pointer;
}
span.deleteicon input {
border: none;
margin: 0px;
padding-right: 0px;
}
but it looks like this in IE 7:
i want to make it like the spotlight in an iPhone:
and do I need css or javascript if i want the 'clear' button to show up when cursor is in the box ? like this ..
it's easy to do it in other newer browsers but need to use it on IE 7 .
thanks for anyone who can share their code . =D
Try ccs3pie
It helps with ancient IEs. You'll be able to use border radius and other cool stuff.
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/
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
I want to create a search function for my web app.
here are the looks on FF & IE, it is ok without strange border
Firefox
IE
and here are the look on Chrome & Safari, it has strange border around the input element
Chrome
Safari
Here is my html & css code
<input type="search" id="generic_search" onkeypress="return runScript(event)" />
<input type="button" id="generic_search_button" />
the border:0 has been applied to all elements
#generic_search
{
font-size: 14px;
width: 250px;
height: 25px;
float: left;
padding-left: 5px;
padding-right: 5px;
margin-top: 7px;
}
#generic_search_button
{
float: left;
width: 25px;
height: 25px;
margin-top: 7px;
cursor: pointer;
background-color: White;
background-image: url(/Images/search.png);
background-repeat: no-repeat;
background-position: center center;
}
How to remove that border?
border: 0 should be enough, but if it isn't, perhaps the button's browser-default styling in interfering. Have you tried setting appearance to none (e.g. -webkit-appearance: none)
It's simple
input {border:0;outline:0;}
input:focus {outline:none!important;}
border-width:0px;
border:none;
I have used this, and in most of the browsers (Chrome, Safari, FF, IE, etc), it worked fine for me 🙂
In my case I am using a CSS framework which adds box-shadow, so I had to also add
box-shadow: none;
So the complete snippet is:
border: none;
border-width: 0;
box-shadow: none;
I use this css code to remove focus input border some times. Hope will help you -:
input:focus, textarea:focus, select:focus{
outline: none;
}
your code is look like this jsfiddle.net/NTkGZ/
try
border:none;
Try this
#generic_search_button
{
float: left;
width: 24px; /*new width*/
height: 24px; /*new width*/
border: none !important; /* no border and override any inline styles*/
margin-top: 7px;
cursor: pointer;
background-color: White;
background-image: url(/Images/search.png);
background-repeat: no-repeat;
background-position: center center;
}
I think the image size might be wrong
Try the following code:
.yourClassName{
border: 0;
outline: none;
}
use this i hope this help ful to you...
border:none !important;
background-color:transparent;
try this
<div id="generic_search"><input type="search" onkeypress="return runScript(event)" /></div>
<button type="button" id="generic_search_button" /></button>