I found this code from here: http://www.cssportal.com/form-elements/text-box.htm
But the problem is you can still see the rectangular shape of the textbox whenever you click inside it. What would be the fix for this? So that the highlight will go with the image with rounded corners
/* Rounded Corner */
.tb5 {
background: url(images/rounded.gif) no-repeat top left;
height: 22px;
width: 230px;
}
.tb5a {
border: 0;
width:220px;
margin-top:3px;
}
This should only occur in some browsers such as Google Chrome, it is meant to help with usability and accessibility but it can cause issues with some styling. What you want to do is remove the dynamic outlines like this:
input[type="text"] {
outline: none;
}
In addition, you can try highlighting the text box still by including a background image change using a psedo-selector like :focus
input[type="text"]:focus {
background: url(images/rounded-focused.gif) no-repeat top left;
}
Related
There are few questions here that ask the same but their solutions don't work for me.
This is a picture from one of those questions and what I want to achieve. I have a list and when there are more items, scrollbar shows up.
I also set the overflow-y to be overlay since I don't want the scrollbar to add to the width of the list. How can I make the track transparent so the items underneath can be seen?
Track overlapping content
[Updated]:
Fiddle to show how it looks now, the picture is what I want to get.
p {
overflow-y: overlay;
width: 101%; }
https://jsfiddle.net/yk1cverh/2/
You can add the following in your css code:
body::-webkit-scrollbar {
width: 0.7em;
background: white;
}
body::-webkit-scrollbar-thumb {
background: #c0392b;
height:30px;
}
body::-webkit-scrollbar-track-piece
{
display:none;
}
In this part:
body::-webkit-scrollbar {
width: 0.7em;
background: white;
}
You can change the background: white; to any color you want. You probably need to make it similar to your body's background color or set it to transparent.
Here is a JS Fiddle that demonstrates it.
https://jsfiddle.net/qzsbf0tm/687/
I have attached image to button with css style.
.a-icon {
background: url('../a.png') no-repeat 100% 100%;
}
.b-icon {
background: url('../b.png') no-repeat 100% 100%;
}
In Firefox it looks fine, but in IE8 blue border appears around icon, when button becomes disabled. I have tried adding border: none and so on, but with no luck.
Any suggestions?
All links with img inside have a blue border on IE lte than 9, add to Your css global style for this tags.
a img {
border:none;
}
Add this to your CSS:
.a-icon,
.a-icon img,
.b-icon,
.b-icon img {
border: 0;
outline: 0;
background: transparent;
}
I think this will be the solution that you are looking for. If I understood you right, the problem is with the link border that is around the image. So you have to remove that.
So try this:
a img {
border:0;
}
Hope it helps
I have a small issue trying to get the following to work, and am not sure if it is something that CSS3 is designed to deal with or not. I have looked around and found that multiple background images are supported, however trying the many examples have resulted in nada.
This is the primary CSS code for rendering my buttons:
.button {
background:#eee url(images/button.gif) repeat-x 0 0;
border:solid 1px #b1a874;
color:#7f7f7f;
font-size:11px;
padding:2px 6px 2px 6px;
cursor:pointer;
line-height:14px !important;
}
The above code produces the standard buttons which are fine. But now I want to add icons on certain buttons, such as a print button. I use 2 sets of additional CSS class:
input.addImage {
background-repeat: no-repeat; /* once */
background-position: 5px 2px;
padding-left: 16px;
vertical-align: middle;
}
And:
input.Print {
background-image: url(../img/buttons/print.png); /* 16px x 16px */
}
As you can see my image is in fact 16x16 which fits nicely into the buttons. However the original background image is stripped away completly, leaving the background color as transparent.
I am sure that if its possible, its something basic I am overlooking, and look forward to figuring this out.
Finally the code for the button:
<input type="button" class="button addImage Print" ... >
Thank you for your valuable time.
When you apply a property in CSS, it completely overwrites any previously defined property for that element. What you need to do is tell it to apply 2 backgrounds to the element, which is done like this:
.button.Print {
background-image: url(images/button.gif), url(../img/buttons/print.png);
}
Multiple backgrounds is only supported within the same CSS class / element definition. Means, you have to set both backgrounds in .button.
Your .print has to contain the default background too seperated by a comma and followed with your print.png icon.
edit
My answer wasn't really clear about that. you have to specify the background first, which should be on top of the other one. Here's some example code with random pictures.
Demo: http://jsfiddle.net/RzWfp/
.button {
background-image: url(http://www.myinkblog.com/wp-content/uploads/2009/02/background2.jpg);
border:solid 1px #b1a874;
color:#7f7f7f;
font-size:11px;
padding:2px 6px 2px 6px;
cursor:pointer;
line-height:14px !important;
}
.button-test {
background-image: url(http://www.famfamfam.com/lab/icons/silk/icons/feed.png), url(http://www.tutorial9.net/wp-content/uploads/2008/07/air-balloon-gradient.jpg);
background-position: left center, center center;
background-repeat: no-repeat;
padding-left: 20px;
}
I want to use an image for the background of a select/dropdown. The following CSS works fine in Firefox and IE, but does not in Chrome:
#main .drop-down-loc { width:506px; height: 30px; border: none;
background-color: Transparent;
background: url(images/text-field.gif) no-repeat 0 0;
padding:4px; line-height: 21px;}
select
{
-webkit-appearance: none;
}
If you need to you can also add an image that contains the arrow as part of the background.
What Arne said - you can't reliably style select boxes and have them look anything like consistent across browsers.
Uniform: https://github.com/pixelmatrix/uniform is a javascript solution which gives you good graphic control over your form elements - it's still Javascript, but it's about as nice as javascript gets for solving this problem.
Generally, it's considered a bad practice to style standard form controls because the output looks so different on each browser. See: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/ for some rendered examples.
That being said, I've had some luck making the background color an RGBA value:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #d00;
}
select {
background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0;
padding:4px;
line-height: 21px;
border: 1px solid #fff;
}
</style>
</head>
<body>
<select>
<option>Foo</option>
<option>Bar</option>
<option>Something longer</option>
</body>
</html>
Google Chrome still renders a gradient on top of the background image in the color that you pass to rgba(r,g,b,0.1) but choosing a color that compliments your image and making the alpha 0.1 reduces the effect of this.
You can use the CSS styles below for all browsers except Firefox 30:
select {
background: url(dropdown_arw.png) no-repeat right center;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 90px;
text-indent: 0.01px;
text-overflow: "";
}
Updated
Here is a solution for Firefox 30. There is a little trick for custom select elements in firefox :-moz-any() CSS pseudo class.
this will be quite difficult to explain. I hope I'm able to.
I recently created a custom ASP.net server control, representing a toolbar. The toolbar contains buttons, so HTML elements. To allow me to add an image I use CSS which add it to the background. The CSS which I apply on the input element looks like this:
.button{
padding: 2px 2px 2px 2px;
margin-right: 2px;
border: 1px solid #999;
cursor: pointer;
text-decoration: none;
color: #606060;
}
Moreover on the button itself (through the style tag; this is because these kind of buttons are rendered automatically and shouldn't be changed by the end-programmer) I have styles which define the background images and some additional settings
background-attachment:scroll;
background-image:url(images/select.png);
background-position:left center;
background-repeat:no-repeat;
padding-left:15px;
The padding-left is needed s.t. the text doesn't go behind the background image. So at the end you would have something like
<input type="submit" style="background-image: url(images/select.png); background-attachment: scroll; background-repeat: no-repeat; background-position: left center; padding-left: 15px;" class="button" id="someId" value="Save" name="someName"/>
On Firefox (as usual) everything works perfectly. My problem is that on IE (tested on IE 7 but I need to be compatible from IE 6+) it happens that if you enter a quite long text as the button text, the button will enlarge, basically the space before and after the button text increases with the size of the text. To have the button still immediately after the image I added the line text-align:right to the button class.
To illustrate it better...
On Firefox:
alt text http://img268.imageshack.us/img268/311/buttonfirefox.jpg
On IE:
alt text http://img23.imageshack.us/img23/2373/buttonie.jpg
Does anyone have any suggestion on how I could fix this??
//Edit:
What I could do of course is to specify a fixed width on the button, till it looks nicely. I would like to avoid this however, if possible.
This is an old bug. You need to add overflow:visible to the button. There is more here:
http://jehiah.cz/archive/button-width-in-ie
and here:
http://www.brandnewbox.co.uk/articles/details/removing_padding_from_ie_buttons/
Just try a css reset of submit button first (at the beginning of css file). For example margin, padding etc set to zero.
I am not quite sure how apply reset for submit buttons ..
but you can try following and test
/**
* Reset browser defaults
* Author: Tim Wright - csskarma.com
* Last updated: 04.19.2009
----------------------------------*/
body,div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,
blockquote,th,td { margin:0;padding:0; }
body { line-height:1;color:#121212;background:#fff; }
h1,h2,h3,h4,h5,h6,p { font-size:100%;font-weight:400; }
ol,ul { list-style:none; }
caption,cite,code,th { font-style:normal;font-weight:400; }
fieldset,img { border:0; }
caption,th { text-align:left; }
:focus { outline:1px dotted #eee; }
table { border-collapse:collapse;border-spacing:0; }
hr { border:0;border-top:1px solid #555;margin:0;height:1px; }
label,button { cursor:pointer; }
As per #Andrew's answer you can try * html input { overflow: visible; } also.