See here jsfiddle http://jsfiddle.net/KvKsm/2/embedded/result/
edit here http://jsfiddle.net/KvKsm/2/
html
<input type="submit" value="Contact Us">
css
input {
-moz-transition: -moz-transform 0.2s ease-in-out 0s;
background: none repeat scroll 0% 0% #2E2E2E;
border-radius: 8px 8px 8px 8px;
border: 0pt none;
box-shadow: 0pt -1px 1px rgba(255, 255, 255, 0.15) inset;
color: #FFFFFF;
display: inline-block;
font-size: 32px;
line-height: 1;
padding: 10px;
text-shadow: 0pt -1px 1px rgba(19, 65, 88, 0.8);width:180px
}
in Desktop browsers
in iPad and iPhone
I want fixed width button.
I found an answer here
http://thinkvitamin.com/design/styling-submit-buttons-for-mobile-safari/
adding -webkit-appearance: none; solved the problem
Related
I upgraded to JQM 1.4, but I liked the theme of 1.3 much better. There is a classic theme in 1.4, which has the same colors. But the navigation buttons in the corners (header) look completely different.
Is it possible to reproduce the same look for those buttons in 1.4?
It is hard to get it exact as jQM 1.3 enhanced buttons using nested spans which are no longer there in 1.4. However, with a little CSS you can get pretty close. Given a header with buttons:
<div data-role="header" data-theme="b">
Home
<h1>Theme B</h1>
Contact Us
</div>
Assign a new class to the buttons (btn_round in my example) and then create the following CSS:
.btn_round
{
-moz-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
-webkit-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
-moz-border-radius: 1.5em !important;
-webkit-border-radius: 1.5em !important;
border-radius: 1.5em !important;
background-image: linear-gradient(rgb(68, 68, 68), rgb(45, 45, 45));
background-origin: padding-box;
background-size: auto;
border-color: rgb(17, 17, 17);
box-shadow: rgba(255, 255, 255, 0.298039) 0px 1px 0px 0px;
text-shadow: rgb(17, 17, 17) 0px 1px 1px;
}
.btn_round:after{
-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
}
This adds the gradient background, rounded corners and shadows that were present in 1.3.
Here is a working DEMO
NOTE: the demo includes CSS for both the dark theme and the light theme. Tweak the CSS to get your desired look.
I have a number input box which is running on iOS. I am using jquery and kendo mobile for this as well as HTML5.
The number input on the Icenium simulator has the up and down arrows but the IPad doesnt. I need a way for these to show up on the IPad. I have looked around but need a straight answer.
Is it possible to have these arrows for a number input on the IPad (eg. quantity)?
If not, is there any way I can implement something similar maybe using kendo mobile, HTML or CSS? Any suggestions would be much appreciated.
This is what i need
<input type="number" value="numberText"/>
<style>
input[type=number]
{
padding:10px;
}
</style>
Thank you
try:
<!DOCTYPE html>
<html lang="en">
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
<style>
.number-wrapper {
margin: 10px 5px;
position: relative;
}
.number {
font-size: 30px;
color: #eee;
display: inline-block;
*display: inline;
*zoom: 1;
background: #000;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
padding: 0 12px;
height: 80px;
line-height: 80px;
text-align: center;
border: 1px solid #555;
-moz-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
-moz-text-shadow: 0 3px 3px #000000;
-webkit-text-shadow: 0 3px 3px #000000;
text-shadow: 0 3px 3px #000000;
}
.inc {
position: absolute;
display: block;
top: -35px;
left: 0;
font-weight: bold;
font-size: 18px;
color: #777;
width: 100%;
height: 90%;
text-align: center;
padding-top: 6px;
}
.dec {
position: absolute;
display: block;
bottom: -18px;
left: 0;
padding-top: 14px;
font-weight: bold;
font-size: 18px;
color: #777;
width: 100%;
height: 90%;
text-align: center;
}
.line {
position: absolute;
width: 100%;
height: 1px;
top: 52%;
left: 0;
background: #000;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
</style>
<body>
<div id="SETtime">
<span class="number-wrapper"><div class="line"></div><span class="inc">+</span><span id="mx" class="number m">00</span><span class="dec">-</span></span>
</div>
</body>
<script>
function twodigits(num) {
return ('0' + num).slice(-2);
}
$('.inc').click(function() {
var target = $(this).siblings('.number').first();
var value = parseInt(target.text());
value++;
target.text(twodigits(value));
});
$('.dec').click(function() {
var target = $(this).siblings('.number').first();
var value = parseInt(target.text());
value--;
target.text(twodigits(value));
});
</script>
</html>
Happy days!
I've created a search bar intended for use in an iOS application. Below is how it renders in browsers (which is how I want it to):
This is how it renders on iOS:
It seems to completely ignore the box shadow. Below is the code used:
#search-content input[type="text"] {
border-radius: 75px;
font-size: .75em;
width: 100%;
padding: .6em .9em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
box-shadow: 0 0 0 1px #bababa, 0 0 0 2px #fff, inset 0 0 10px rgba(0, 0, 0, 0.17);
outline: none;
border: 0;
color: #656565;
}
I'd really appreciate it if anyone could let me know why this is happening.
Thanks!
Add -webkit-appearance: none; to your input field:
#search-content input[type="text"] {
border-radius: 75px;
font-size: .75em;
width: 100%;
padding: .6em .9em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
box-shadow: 0 0 0 1px #bababa, 0 0 0 2px #fff, inset 0 0 10px rgba(0, 0, 0, 0.17);
outline: none;
border: 0;
color: #656565;
-webkit-appearance: none;
}
I am using border radius on an input field and when I select the field, it gets a border highlight as if there is no border radius i.e. the imaginary rectangle with sharp edges gets highlighted and not the real rounded corners one. Any cues on how to get the rounded rectangle highlighted? The border radius is functioning perfectly but on focus the highlight is not on the rounded corners.
<input class="filter" type="text" name = "Test1" value="Test1"> <!--HTML-->
.filter{border-radius:9px;} /*CSS*/
This is because outline doesn't respect (for whatever reason) border-radius, to emulate this it's easiest to use box-shadow:
.filter {
padding: 0.4em;
outline: none;
border-radius: 9px;
}
.filter:focus {
box-shadow: 0 0 0 2px #f90; /* or whatever colour you'd prefer */
}
JS Fiddle demo.
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
This works like a charm. you will get a good effect on focus
I've created HTML input.
<input type="submit" id="Submitbtn" onclick="javascript:function()" value="Login" name="Submitbtn">
CSS is:
input:hover, input{
background: none repeat scroll 0 0 #1356B4;
border: medium none;
margin-right: 0;
padding: 3px 10px 5px 0;
vertical-align: middle;
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font: 14px/26px Arial,Helvetica,sans-serif;
height: 26px;
-webkit-transition: all 0.3s ease-in-out 0s;
}
The output in web browsers:
And in iPad:
How to resolve this?
I suppose you must get rid of the webkit appearance on your button by adding in your CSS:
-webkit-appearance: none;