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;
}
Related
I'm developing a mobile application with cordova for, amongst others, IOS. In this application I'm using the HTML5 video player, but on my iPhone as well as my iPad the controls are situated OVER the play button. I can still press the play button, but seeking is harder than normal, and it just looks weird.
Does anybody have an idea on why this is and what I can do to solve this? Thanks.
Edit lib/ionic/css/ionic.css and remove/comment out the conflicting style attributes for input[range] Keep in mind that you will have to replicate the change in ionic.min.css for prod builds and/or if you update the ionic framework. Obviously you will have to come up with something less blunt if you are using or planning on using the Ionic framework's range input control styles.
ionic.css
/**
* Range
* --------------------------------------------------
*/
/*input[type="range"] {
display: inline-block;
overflow: hidden;
margin-top: 5px;
margin-bottom: 5px;
padding-right: 2px;
padding-left: 1px;
width: auto;
height: 43px;
outline: none;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ccc), color-stop(100%, #ccc));
background: linear-gradient(to right, #ccc 0%, #ccc 100%);
background-position: center;
background-size: 99% 2px;
background-repeat: no-repeat;
-webkit-appearance: none; }
input[type="range"]::-webkit-slider-thumb {
position: relative;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);
cursor: pointer;
-webkit-appearance: none;
border: 0; }
input[type="range"]::-webkit-slider-thumb:before {
position: absolute;
top: 13px;
left: -2001px;
width: 2000px;
height: 2px;
background: #444;
content: ' '; }
input[type="range"]::-webkit-slider-thumb:after {
position: absolute;
top: -15px;
left: -15px;
padding: 30px;
content: ' '; }
.range {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
padding: 2px 11px; }
.range.range-light input::-webkit-slider-thumb:before {
background: #ddd; }
.range.range-stable input::-webkit-slider-thumb:before {
background: #b2b2b2; }
.range.range-positive input::-webkit-slider-thumb:before {
background: #387ef5; }
.range.range-calm input::-webkit-slider-thumb:before {
background: #11c1f3; }
.range.range-balanced input::-webkit-slider-thumb:before {
background: #33cd5f; }
.range.range-assertive input::-webkit-slider-thumb:before {
background: #ef473a; }
.range.range-energized input::-webkit-slider-thumb:before {
background: #ffc900; }
.range.range-royal input::-webkit-slider-thumb:before {
background: #886aea; }
.range.range-dark input::-webkit-slider-thumb:before {
background: #444; }
.range .icon {
-webkit-box-flex: 0;
-webkit-flex: 0;
-moz-box-flex: 0;
-moz-flex: 0;
-ms-flex: 0;
flex: 0;
display: block;
min-width: 24px;
text-align: center;
font-size: 24px; }
.range input {
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
display: block;
margin-right: 10px;
margin-left: 10px; }
.range-label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-moz-box-flex: 0;
-moz-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
display: block;
white-space: nowrap; }
.range-label:first-child {
padding-left: 5px; }
.range input + .range-label {
padding-right: 5px;
padding-left: 0; }
*/
Couldn't find anything in the doc's but perhaps someone knows better or can suggest a work around using available properties to hack it together?
If not in bootstrap does anyone know of a gem (rails) or generator that can create the CSS/jQuery/JS?
You can also try this Bootstrap 3 Nav Wizard version on GitHub, LESS file is included:
https://github.com/acornejo/bootstrap-nav-wizard
demo here: http://acornejo.github.io/bootstrap-nav-wizard/
Preview (orig):
Preview (customized):
Maybe you are looking for this. Check the demo below. Just resize the window if it doesn't look like the image below.
Fiddle
HTML
<h3>Wizard</h3>
<div class="wizard">
<a><span class="badge">1</span> Set Global Properties</a>
<a><span class="badge">2</span> Specify Entry Scheme</a>
<a class="current"><span class="badge badge-inverse">3</span> Create Test Entry</a>
<a><span class="badge">4</span> Check Your Data and Generate Portal</a>
</div>
CSS (or SCSS instead)
.wizard a {
padding: 10px 12px 10px;
margin-right: 5px;
background: #efefef;
position: relative;
display: inline-block;
}
.wizard a:before {
width: 0;
height: 0;
border-top: 20px inset transparent;
border-bottom: 20px inset transparent;
border-left: 20px solid #fff;
position: absolute;
content: "";
top: 0;
left: 0;
}
.wizard a:after {
width: 0;
height: 0;
border-top: 20px inset transparent;
border-bottom: 20px inset transparent;
border-left: 20px solid #efefef;
position: absolute;
content: "";
top: 0;
right: -20px;
z-index: 2;
}
.wizard a:first-child:before,
.wizard a:last-child:after {
border: none;
}
.wizard a:first-child {
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.wizard a:last-child {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.wizard .badge {
margin: 0 5px 0 18px;
position: relative;
top: -1px;
}
.wizard a:first-child .badge {
margin-left: 0;
}
.wizard .current {
background: #007ACC;
color: #fff;
}
.wizard .current:after {
border-left-color: #007ACC;
}
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 have this styling:
#flash_wrapper {
width: 100%;
padding: 15px 0;
background: rgba(255,255,120,0.2);
border-bottom: 2px solid #FFFFAA;
-moz-box-shadow: 0 2px 2px #FFF;
-webkit-box-shadow: 0 2px 2px #FFF;
box-shadow: 0 2px 2px #FFF;
.flash{
width: 960px;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #333;
}
}
But I would like to have background: red in #flash_wrapper, if there is a children with id error in flash. So, if I have the following:
<div id="flash_wrapper">
<div class="flash" id="error">
Error value
</div>
</div>
I would like to have the background of #flash_wrapper set to red.
How can I do that?
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