I want to fix the classic bootstrap style hamburger button on my navbar, like the one that appears as a toggle button when the screen size gets sufficiently small.
Anyways, how can I display the button as is, without having to implement it through the navbar-toggle class?
EDIT: Here is the button I have:
<div>
<div class="center">
<button type="button" class="btn">☰</button>
</div>
</div>
body {
background: #222;
}
.center {
width: 100px;
margin: 50px auto;
}
.btn {
background-color: #222;
border: 1px solid #3A3A3A;
color: #D3D3D3;
width: 42px;
margin-left: 42px;
font-size: 23px;
height: 34px;
transition: color 0.45s;
transition: border 0.45s;
}
button.btn:hover {
color: #2978E0;
border: 1px solid #61A5FF;
}
https://jsfiddle.net/rstty1ye/
Using a UTF-8 character was mentioned on tutsplus.com
It's not my original finding or idea.
Nevermind, I figured it out.
Created a custom button and used an UTF-8 character: Trigram for Heaven for the bars.
I have this code:
.button {
height: 50px;
width: 160px;
font-size: 16px;
background: #eee;
border-radius: 5px;
border: none;
}
<button type="button" class="button">Submit</button>
When I click into this button (button focus, active), the text will flicker (move to down a few point) on IE, Firefox browsers. How to fix it with CSS? Hope you help me. Thanks
Demo: http://jsfiddle.net/WorkWe/ht6pvoqz/1/
Wrap your text in span and give it position: absolute and it won't flick anymore!
<button type="button" class="button"><span>Submit</span></button>
.button {
height: 50px;
width: 160px;
background: #eee;
border-radius: 5px;
border: none;
margin: 0;
padding: 0;
position: relative;
}
span {
position: absolute;
top: 5px;
left: 5px;
}
Some sort of mini-reset does the job on FF, but using extra span inside the button resolves issue on IE. Looks like we need to start considering usage of "a" tags instead of buttons:
HTML:
<button name="button" class="button"><span>Submit</span></button>
CSS:
.button {
height: 50px;
width: 160px;
font-size: 16px;
background: #eee;
border-radius: 5px;
border: none;
}
button:active,
button:focus,
button:hover {
margin:0;
padding:0;
}
JSFiddle for that.
Hope this helps
UPDATE: There is a way of dealing with IE issue - based on this SO answer (#alicarn answer), but problem with this method is it creates opposite flickering on chrome. So I guess you need to pick up your poison in this case.
This is default behavior of IE. This can't be fixed I think.
Instead of using button tag, I suggest to use anchor tag.
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.
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
So, I can create an input button with an image using
<INPUT type="image" src="/images/Btn.PNG" value="">
But, I can't get the same behavior using CSS. For instance, I've tried
<INPUT type="image" class="myButton" value="">
where "myButton" is defined in the CSS file as
.myButton {
background:url(/images/Btn.PNG) no-repeat;
cursor:pointer;
width: 200px;
height: 100px;
border: none;
}
If that's all I wanted to do, I could use the original style, but I want to change the button's appearance on hover (using a myButton:hover class). I know the links are good, because I've been able to load them for a background image for other parts of the page (just as a check). I found examples on the web of how to do it using JavaScript, but I'm looking for a CSS solution.
I'm using Firefox 3.0.3 if that makes a difference.
If you're wanting to style the button using CSS, make it a type="submit" button instead of type="image". type="image" expects a SRC, which you can't set in CSS.
Note that Safari won't let you style any button in the manner you're looking for. If you need Safari support, you'll need to place an image and have an onclick function that submits the form.
You can use the <button> tag. For a submit, simply add type="submit". Then use a background image when you want the button to appear as a graphic.
Like so:
<button type="submit" style="border: 0; background: transparent">
<img src="https://i.imgur.com/tXLqhgC.png" width="90" height="90" alt="submit" />
</button>
More info
div.myButton input {
background: url(https://i.imgur.com/tXLqhgC.png) no-repeat;
background-size: 90px;
width: 90px;
height: 90px;
cursor: pointer;
border: none;
}
<div class="myButton">
<INPUT type="submit" name="" value="">
</div>
This will work anywhere, even in Safari.
This article about CSS image replacement for submit buttons could help.
"Using this method you'll get a clickable image when style sheets are active, and a standard button when style sheets are off. The trick is to apply the image replace methods to a button tag and use it as the submit button, instead of using input.
And since button borders are erased, it's also recommendable change the button cursor to
the hand shaped one used for links, since this provides a visual tip to the users."
The CSS code:
#replacement-1 {
width: 100px;
height: 55px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(image.gif) no-repeat center top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
#replacement-2 {
width: 100px;
height: 55px;
padding: 55px 0 0;
margin: 0;
border: 0;
background: transparent url(image.gif) no-repeat center top;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
height: 0px;
}
Here's a simpler solution but with no extra surrounding div:
<input type="submit" value="Submit">
The CSS uses a basic image replacement technique. For bonus points, it shows using an image sprite:
<style>
input[type="submit"] {
border: 0;
background: url('sprite.png') no-repeat -40px left;
text-indent: -9999em;
line-height:3000;
width: 50px;
height: 20px;
}
</style>
Source:
http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/
Here is what worked for me on Internet Explorer, a slight modification to the solution by Philoye.
>#divbutton
{
position:relative;
top:-64px;
left:210px;
background: transparent url("../../images/login_go.png") no-repeat;
line-height:3000;
width:33px;
height:32px;
border:none;
cursor:pointer;
}
You can use blank.gif (a one-pixel transparent image) as the target in your tag:
<input type="image" src="img/blank.gif" class="button">
And then style background in CSS:
.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}
A variation on the previous answers:
I found that opacity needs to be set, of course this will work in Internet Explorer 6 and on. There was a problem with the line-height solution in Internet Explorer 8 where the button would not respond. And with this you get a hand cursor as well!
<div id="myButton">
<input id="myInputButton" type="submit" name="" value="">
</div>
#myButton {
background: url("form_send_button.gif") no-repeat;
width: 62px;
height: 24px;
}
#myInputButton {
background: url("form_send_button.gif") no-repeat;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
width: 67px;
height: 26px;
cursor: pointer;
cursor: hand;
}
I think the following is the best solution:
CSS:
.edit-button {
background-image: url(edit.png);
background-size: 100%;
background-repeat: no-repeat;
width: 24px;
height: 24px;
}
HTML:
<input class="edit-button" type="image" src="transparent.png" />
My solution without JavaScript and without images is this:
HTML:
<input type=Submit class=continue_shopping_2
name=Register title="Confirm Your Data!"
value="confirm your data">
CSS:
.continue_shopping_2: hover {
background-color: #FF9933;
text-decoration: none;
color: #FFFFFF;
}
.continue_shopping_2 {
padding: 0 0 3px 0;
cursor: pointer;
background-color: #EC5500;
display: block;
text-align: center;
margin-top: 8px;
width: 174px;
height: 21px;
border-radius: 5px;
border-width: 1px;
border-style: solid;
border-color: #919191;
font-family: Verdana;
font-size: 13px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #FFFFFF;
}
Perhaps you could just import a .js file as well and have the image replacement there, in JavaScript.
Let's assume you can't change the input type, or even the src. You only have CSS to play with.
If you know the height you want, and you have the URL of a background image you want to use instead, you're in luck.
Set the height to zero and padding-top to the height you want. That'll shove the original image out of sight, giving you a perfectly clean space to show your CSS background-image.
It works in Chrome. I don't have any idea if it works in Internet Explorer. Barely anything clever does, so probably not.
#daft {
height: 0;
padding-top: 100px;
width: 100px;
background-image: url(clever.jpg);
}
<input type="image" src="daft.jpg" id="daft">