In my CSS I tried to mask a button's look by adding a background like this:
input[type=button]
{
background-image:url('../images/next-button.png');
background-position:0px;
background-repeat: no-repeat;
height:60px;
width:120px;
outline: 0;
}
input[type=button]:hover
{
background-position: 0px -66px;
}
input[type=button]:active
{
background-position: 0px -132px;
}
the new background shows up, but there is still a gray border around the background from the button itself. how do i remove this? The background image is a transarent PNG so I know this outline isn't from the image I'm using.
here is the HTML for the button
<input type="button" id="submit1" />
Thanks a bunch!
!--EDIT--
This is the proper way to do it! thanks for the answers guys!
CSS:
input[type=button]
{
border: none ;
background-image:url('../images/next-button.png');
background-position:0px;
background-repeat: no-repeat;
height:60px;
width:120px;
outline: 0;
}
input[type=button]:hover
{
background-position: 0px -66px;
}
input[type=button]:active
{
background-position: 0px -132px;
}
.next_btn{
border: none ;
color:#FFFFFF;
background-color:#FFFFFF;
}
and the HTML:
<input type="button" class="next_btn" id="submit1"/>
Try adding in
border: none
as an attribute for input[type=button].
Related
I'm having trouble in changing the image color inside of a button.
Here's the image.
I want the black download button icon change to green icon if possible in CSS? or any other way to make it like that? Instead of re-creating it again
And for the code:
<button><em class="leftImage"></em>Button<em class='rightImage'></em></button>
button{
margin: 0px;
padding: 0px;
font-family:Lucida Sans MS, Tahoma;
font-size: 12px;
color: #000;
white-space:nowrap;
width:auto;
overflow:visible;
height:28px;
}
button em{
vertical-align:middle;
margin:0 2px;
display:inline-block;
width:16px;
height:16px;
background-image: url(icon_delete.png);
}
button em.leftImage{
background-position: -96px -112px;
}
button em.rightImage{
background-position: -64px -16px;
}
But the output is not changing the color. its still black.
https://jsfiddle.net/35kfu6z7/
You original code doesn't make much sense.
What you have here is an image with the 2 versions of your button. You can use a technique called CSS Sprites: https://css-tricks.com/css-sprites/
The idea here is to force the size of the button element to be the same size as the button on your image, then offset it using the background-position property to align it properly inside your button.
Here is an example using the picture you provided and 2 different clases (with 2 different offset) to show either the green or the black:
button{
display:inline-block;
width:84px;
height:26px;
background-image: url(http://i.stack.imgur.com/8aNAf.png);
background-color: none;
border: none;
}
button.green{
background-position: -3px 31px;
}
button.black{
background-position: -3px -3px;
}
<button class="green"></button>
<button class="black"></button>
Best would be to use a font like fontawesome for the icon. That way you can easily change the colour. Or use filters, see: Change color of PNG image via CSS?.
Can you link the actual image file you are using into your jsfiddle?
Try https://jsfiddle.net/35kfu6z7/1/
button em{
vertical-align:middle;
display:inline-block;
width:29px;
height:30px;
background-image: url(http://imgur.com/download/vICywDr/);
repeat:none;
}
button em.leftImage{
background-position: -28px, 0;
}
button em.rightImage{
background-position: 0, 0;
}
Same idea that #Jean-Yves Fargeat suggested(not enough rep to comment)
try this
html
<button onclick="green()";>
<div id="border">
<div id="square">
<div id="arrow"></div>
</div>
</div><span>download</span>
</button>
css
#border {
border: 2px solid black;
border-radius: 50%;
display: inline-block;
padding: 2px 6px 6px 6px;
position: relative;
top: 5px;
}
#square {
background: #000;
width: 4px;
height: 8px;
position: relative;
}
#arrow {
display: inline-block;
border: 5px solid;
border-color: black transparent transparent transparent;
position: absolute;
top: 100%;
left: -70%;
}
button span{
line-height: 30px;
margin: 5px;
}
javascript
function green() {
document.getElementById('border').style.borderColor = "green";
document.getElementById('square').style.background = "green";
document.getElementById('arrow').style.borderColor = "green transparent transparent transparent";
}
see here jsfiddle.net/hworm4/mpj47fLb/
Why not change the color of the image using photoshop?
I have an input that is positioned inside of a div. When I set the div background color it also changes the input background color. The input has a background image, so I can't simply set the background color for the input.
Thus, I need a way to change the background color of the input that is inside of the div while keeping the background image of the div.
CSS:
#searchDiv{
background:#606060;
position:relative;
}
#topSearch{
font: 40px Segoe UI Light;
width:94%;
height:60px;
text-indent: 62px;
background:white;
background: url('search_icon.png');
background-repeat: no-repeat;
background-position: left;
background-size: 60px;
margin: 10px 3% 10px 3%;
}
HTML:
<div id="searchDiv">
<input type="search" id="topSearch"></input>
</div>
Change the input's style like this:
#topSearch {
font: 40px Segoe UI Light;;
width:94%;
height:60px;
text-indent: 62px;
background-color:white;
background-image: url('search_icon.png');
background-repeat: no-repeat;
background-position: left;
background-size: 60px;
margin: 10px 3% 10px 3%;
}
add an !important to your input background color
#topSearch{
font: 40px Segoe UI Light;;
width:94%;
height:60px;
text-indent: 62px;
background:white !important;
background: url('search_icon.png');
background-repeat: no-repeat;
background-position: left;
background-size: 60px;
margin: 10px 3% 10px 3%;
}
try background: #fff url('search_icon.png') no-repeat center left;
or if you declare multiple backgrounds as shown in your code, comma separate them
In your css for #TopSearch you have the 'background' attribute twice. It will always read the last one. So even thought you are setting it to white you are overwriting it with the very next line for the image.
Change
background: white;
to
background-color: white;
And change
background: url('search_icon.png');
to
background-image: url('search_icon.png');
I am applying search icon in every input textbox.
My problem comes with icon when there is some value in it.
you can see it here-
Fiddle
When I am doing focus in, then the search icon goes hidden, But how do I manage so it keeps hiding this icon when there is some value in it?
css-
.input-search {
background:url('http://www.aljanaedu.com/Limitless/images/icons/14x14/search.png') no-repeat left 10px center;
}
.input-search:focus {
background-image:none;
}
I could do It with jQuery easily, but is there any way of doing it with CSS only?
I've updated your fiddle, you can try it out!
http://jsfiddle.net/X7k2B/6/
HTML:
<input
type="text"
id="myInput"
placeholder="Some Fallback Text" >
CSS:
#myInput::-webkit-input-placeholder {
color: transparent;
text-indent: -9999px;
background:url('http://www.aljanaedu.com/Limitless/images/icons/14x14/search.png') no-repeat left 10px center;
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput::-moz-placeholder {
/* Firefox 19+ */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/123x17&text=PlaceholderImage");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-moz-placeholder {
/* Firefox 18- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/123x17&text=PlaceholderImage");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-ms-input-placeholder {
/* IE 10- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/123x17&text=PlaceholderImage");
background-position: 0 50%;
background-repeat: no-repeat;
}
This looks like a good option
<style>
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>
http://jsfiddle.net/s6G57/
So in your case it would look like this
<style>
.input-search:invalid {
background:url('http://www.aljanaedu.com/Limitless/images/icons/14x14/search.png') no-repeat left 10px center;
}
.input-search:valid {
background: #fff;
}
</style>
then just add required to your input
I have a problem. While designing some codes, I stuck at a position. I want to pick a search icon from a CSS sprites and to keep it to a desired position like shown in below screenshot.
There are some limitation like I can only edit or add more CSS and I can't edit search Input tag and also can't add more element around Input tag like DIV,SPAN,P,B etc. For this purpose, I wrote a code that is live at www.jsfiddle.net/JFx9g.
Is this possible or not? Can you edit this?
try this (i have also updated the fiddle)
<div class='search_input_container'>
<input class="search_input" name="q" type="text" value=""/>
<div class='search_glass'></div>
</div>
css
.search_input_container{
width:450px;
height:30px;
border:1px solid #ccc;
display:table;
}
.search_input{
border:none;
padding:5px;
width:90%;
outline:none;
display:table-cell;
}
.search_glass{
border:none;
width:18px;
height:20px;
background: url(http://i.imgur.com/BX2OXxc.png);
background-repeat: no-repeat;
background-position: -20px 0px;
display:table-cell;
}
New Edited JSFIDDLE: http://jsfiddle.net/JFx9g/10/
http://jsfiddle.net/vikramjakkampudi/W2Cnc/
input{
height:30px;
}
.inputImage {
background-position: 100% center;
background-clip: border-box;
background-attachment: scroll;
background-origin: padding-box;
background-image: url("your image url");
background-repeat: no-repeat;
background-size: 8px auto;
cursor: pointer;
width: 93.5% !important;
padding-right: 5%;
}
add this css and assign inputImage class to your input field
Since I think that it is not possible to do it as I asked so I tried myself to do this with as short code as I can and then I got the following one That is also live on www.jsfiddle.net/JFx9g/18/
<style type="text/css">
.search_text {
position: relative;
}
.search_text:after {
content: "";
position: absolute;
top: -3px;
right: 7px;
width: 19px;
height: 19px;
background: url(http://i.imgur.com/BX2OXxc.png) -19px -2px no-repeat;
}
.search_text_input {
height: 24px;
width: 450px;
}
</style>
<span class="search_text">
<input class="search_text_input" name="q" type="text" value=""/>
</span>
I am trying to create a CSS theme switcher button like below. The top image shows what I have so far and the bottom image shows what I am trying to create.
I am not the best at this stuff I am more of a back-end coder. I could really use some help.
I have a live demo of the code here http://dabblet.com/gist/2230656
Just looking at what I have and the goal image, some differences.
I need to add a gradient
The border is not right on mine
Radius is a little off
Possibly some other stuff?
Also here is the code...it can be changed anyway to improve this, the naming and stuff could be improved I am sure but I can use any help I can get.
HTML
<div class="switch-wrapper">
<div class="switcher left selected">
<span id="left">....</span>
</div>
<div class="switcher right">
<span id="right">....</span>
</div>
</div>
CSS
/* begin button styles */
.switch-wrapper{
width:400px;
margin:220px;
}
.switcher {
background:#507190;
display: inline-block;
max-width: 100%;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
position:relative;
}
#left, #right{
width:17px;
height:11px;
overflow:hidden;
position:absolute;
top:50%;
left:50%;
margin-top:-5px;
margin-left:-8px;
font: 0/0 a;
}
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: 0px 0px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -19px;
}
.left, .right{
width: 30px; height: 25px;
border: 1px solid #3C5D7E;
}
.left{
border-radius: 6px 0px 0px 6px;
}
.right{
border-radius: 0 6px 6px 0;
margin: 0 0 0 -6px
}
.switcher:hover,
.selected {
background: #27394b;
box-shadow: -1px 1px 0px rgba(255,255,255,.4),
inset 0 4px 5px rgba(0,0,0,.6),
inset 0 1px 2px rgba(0,0,0,.6);
}
This button can be implemented in pure CSS, without any external images:
http://jsfiddle.net/canassa/weABj/4/
Beware that using a pure CSS has a few drawbacks:
IE10
Everything should render perfectly.
IE9
Gradients stops working.
IE8
Border-radius stops working.
IE7
Hell breaks loose
You could do a combination of border-radius rules for each browser. However, I find this to be way too tedious for small images like that. Do a .png or .jpg sprite, then set the background-position on :hover and :active
For example:
#right { background: url() top right; }
#right:hover { background-position: center right; }
#right:active { background-position: bottom right; }
#left { background: url() top left; }
#left:hover { background-position: center left; }
#left:active { background-position: bottom left; }
Okay, here is some modification done with css.
dabblet.com/gist/2231617
Replace...
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: 0px px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -19px;
}
with...
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -19px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: 0px 0px;
}
See DEMO