I have an issue with the positioning of a textbox and button, where it doesn't display correctly under Chrome.
Here is an example from each browser, as you can see the textbox under Chrome is pushed out of position.
Internet Explorer/Firefox
Chrome
html:
<div id="divSearch">
<input type="text" id="txtSearch" placeholder=" Search..."/>
<input type="submit" id="btnSearch" value=""/>
</div>`
css:
input[type=text]{
width: 200px;
height: 24px;
border: none;
border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
-webkit-appearance: none;
-moz-appearance: none;
padding: 0;
}
input[type="submit"]{
border: none;
border-radius: 0px 3px 3px 0px;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 0px 3px 3px 0px;
width: 32px;
height: 24px;
background: url(../img/search_button.png) no-repeat;
background-color: white;
background-position: 10px 5px;
}
#divSearch{
float: right;
width: 300px;
height: 40px;
white-space: nowrap;
margin-right: 50px;
}
Now if I remove the height from input[type="submit"] the positioning is fine except the button is now the wrong size.
I can't work out why the height of the button causes the issue. Any advice on how to fix it?
Thanks
Add the following code. It should work:
input[type=text]{
float:left
}
Make the button value non-empty will resolve this.
<input type="submit" id="btnSearch" value=" "/>
The root cause is the button has no text baseline.
Related
we are developing hybrid mobile application using dojo 1.10.3 .
all devices text field is coming UI is good except iPhone environment text field inside top portion unwanted property(black color border and shadow) coming that is not looking good.
In that input field we are not able to find it what is that exactly property
we are taking some input fields and adding css properties like below
.textbox{
margin: 0px auto 0px auto;
font-size: 12px;
font-weight: bold;
text-indent: 10px;
color: rgba(23, 82, 117, 1.0);
display: block;
width: 85%;
height: 34px;
border: 1px solid rgba(204, 204, 204, 1.0);
border-radius: 0px;
background-color: white !important;
outline: none !important;
-webkit-box-shadow: inset 0px 0px 0px 0px transparent;
-moz-box-shadow: inset 0px 0px 0px 0px transparent;
box-shadow: inset 0px 0px 0px 0px transparent;
}
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
and textfeild default css code in iphone.css like below
.mblTextBox {
height: 22px;
border-width: 1px;
border-style: inset;
font-family: Helvetica;
font-size: 13px;
border-color: #9cacc0;
border-radius: 5px;
}
i am attaching screen shots Please find my problem easily understand
we want like this
enter image description here
actual problem below like this
enter image description here
Try adding: -webkit-appearance: none; to all input elements in CSS.
The input below should appear the same on all browsers (including mobile Safari)
input[type=text] {
-webkit-appearance: none;
border: 1px solid black;
border-radius: 0px;
outline: none;
width: 200px;
margin: 0px;
padding: 4px;
}
<input type="text" />
Edit:
It seems that you're problem could also be solved via this way: https://davidwalsh.name/input-shadows-ipad
Edit 2:
I've tried the example below multiple times and it should definitely work. If not, you're using some CSS rules that might override one (or more) of the rules from the example.
Result on iPhone Simulator:
ul.examples {
list-style: none;
padding: 0px;
font-family: Arial;
}
.textbox {
margin: 5px 0px 10px 0px;
display: block;
width: 100%;
border: 1px solid rgba(204, 204, 204, 1.0);
border-radius: 0px;
outline: none !important;
}
.example:last-child .textbox {
-webkit-appearance: none;
color: red;
}
<ul class="examples">
<li class="example">Your example:
<br/>
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
</li>
<li class="example">My example:
<br/>
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
</li>
</ul>
this is my first question here.
I'm having an issue getting my html form buttons side by side.. can somebody take a look and tell me whats wrong? it'd seem like they should by default be placed inline, but I guess that isnt the case.
Here is my html code.
<input type="submit" name="1" formtarget="" value="1">
<input type="submit" name="2" formtarget="" value="2">
<input type="submit" name="3" formtarget="" value="3">
<input type="submit" name="4" formtarget="" value="4">
and here is the CSS for the form input and individual name
#form input {
position: relative;
display: inline;
margin: 0;
padding: 0;
border: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 4px;
border-radius: 4px;
text-shadow: none;
line-height: 44px;
-webkit-appearance: none;
}
and this is the same for each button besides the color changes.
#form input[name="1"] {
margin-top: 8px;
height: 44px;
width: 50%;
background: #A901DB;
border-bottom: 1px solid #B404AE;
color: #FFF;
font-size: 18px;
text-align: center;
}
#form input[name="2"] {
margin-top: 8px;
height: 44px;
width: 50%;
background: #A901DB;
border-bottom: 1px solid #B404AE;
color: #FFF;
font-size: 18px;
text-align: center;
}
Can someone help me set this up so that they are inline, side by side?
EDIT: This is what it shows.
http://jsfiddle.net/g01juc2z/2/
you have 4 elements set to width:50% which equals 200% width. Change them to width: 24% (inline-block elements have a natural spacing of 1 or 2px) or less and they will be aligned:
#form input[name="1"] {
margin-top: 8px;
height: 44px;
width: 24%; <---------------
background: #A901DB;
border-bottom: 1px solid #B404AE;
color: #FFF;
font-size: 18px;
text-align: center;
}
FIDDLE
in your css make these change where you write
[name="1"]
replace it with
[type="submit"]
and do not repeat it like a name
and another change is
width:24%;
I am trying to achieve following feature:
It's an input box, has 4 digits, once clicked, user can input 4 digits.
It's part of a mobile app.
Currently what I have achieved is : example, note that for some reason,
outline: none; works fine in my app but not work in this jsFiddle example.
My question is how to draw the 3 separation bar and also display those digits
just fit their position within it?
Is it achievable using css?
below are code:
<form id="login" class="ui-shadow-around ui-corner-all-input" data-enhance="false">
<div data-role="fieldcontain">
<span>
<input type="tel" name="retailer_pin" maxlength="4" class="numbersOnly" required="" placeholder="" style="outline: none;">
</span>
</div>
<input type="submit" class="submitHidden">
</form>
css:
.ui-corner-all-input {
-webkit-background-clip: padding;
background-clip: padding-box;
-webkit-border-radius: .6em /*{global-radii-blocks}*/;
border-radius: .6em /*{global-radii-blocks}*/;
width: 35%;height: 3.5em; margin: 0 auto; margin-bottom: 44px;
margin-top: 24px;
}
.ui-shadow-around {
-moz-box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;
-webkit-box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;
box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;
border: 1px #b6b6b6 solid;
}
*:not(input):not(textarea) {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
FORM[data-enhance="false"] INPUT, textarea {
outline: none;
}
FORM[data-enhance="false"] SPAN {
overflow: hidden;
display: block;
padding: 0 10px 0 0px;
text-align: left;
}
.submitHidden {
visiblity: hidden;
position: absolute;
opacity: 0;
}
Here is my take on the problem.
It uses a proper input element (please don't make the life of your users harder than it already is) and a transparent background to render 4 blocks in the background.
.input-widget {
vertical-align: top;
margin-left: 1rem;
font-size: 2rem;
display: inline-block;
position: relative;
}
.input-widget .input {
width: 8rem;
font-size: inherit;
font-family: inherit;
letter-spacing: 5px;
background-color: transparent;
border: none;
-moz-appearance: textfield;
}
.input-widget .input::-webkit-inner-spin-button,
.input-widget .input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.input-widget .digit-background {
position: absolute;
top: 1px;
left: 0;
z-index: -1;
}
.input-widget .digit-background .digit {
display: inline-block;
float: left;
}
.input-widget .digit-background .digit::before {
content: '0';
color: lightgray;
background-color: currentColor;
display: inline-block;
padding: 1px;
margin: -1px 4px 0 -1px;
}
<div class="input-widget">
<input type="number" max="9999" class="input" value="01234">
<div class="digit-background">
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
</div>
</div>
And a SCSS version is here: https://jsfiddle.net/cburgmer/0xgtdyLj/1/
You could do it like this:
HTML:
<table>
<tr>
<td><input class="clock" type="text" maxlength="1" size="1" onkeyup="next(2)"></td>
<td><input id="2" class="clock" type="text" maxlength="1" size="1" onkeyup="next(3)"></td>
<td><input id="3" class="clock" type="text" maxlength="1" size="1" onkeyup="next(4)"></td>
<td><input id="4" class="clock" type="text" maxlength="1" size="1"></td>
</tr>
CSS:
.clock {
color:darkgray;
border-style:none;
width:40px;
height:60px;
font-size:60px;
}
td{
border:2px solid darkgray
}
table {
border-collapse:collapse;
}
JavaScript:
function next(next) {
document.getElementById(next).focus();
}
Link: http://jsbin.com/uhaHunuq/1/edit?html,output
Maybe you can use four text input items and put them in a small table. With JavaScript, make each text box take one character and give the focus state to the next text box. The lines could be done with the table border and box. Use the CSS to hide the text box frame.
I tried to style a select. It is working more or less in all browsers except in IE and Chrome. The big question for me is why isn't it working in Chrome 25?
On the left side you can see how it should look like and on the right side how it looks like in Chrome.
HTML:
<div class="selectContainer">
<select name="adults" class="select-style" size="1">
<?php
for ($i=1; $i<=99; $i++){
echo '<option>' . $i . '</option>';
}
?>
</select>
</div>
<div class="selectDescription">
<span class="annotation">Erwachsene</span>
</div>
CSS:
.selectContainer {
background-image: url('../img/select-style.png');
background-repeat: no-repeat;
border-bottom: 1px solid #006633;
border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
-webkit-border-radius: 0px 0px 8px 8px;
width: 36px;
overflow: hidden;
float: left;
}
.select-style {
width: 57px;
height: 27px;
border: none;
background: none;
padding-top: 5px;
color: #95C11F;
}
.selectDescription {
line-height: 27px;
float: left;
padding-left: 5px;
}
Live example:
http://bfb.bplaced.net/test/
Add -webkit-appearance: none; to the .select-style class and it works in chrome ..
Seems like webkit is a little stricter with styling the <select> element ..
Also don't forget to add this if you don't want Chrome/Firefox's default orange border on focus:
:focus { outline-style: none; }
::-moz-focus-inner { border-style: none; }
Fiddle
I'm working on styling my website forms and found a tutorial that seems to work up to a point... The tutorial includes code to have hover hints, and this code is causing things to get ugly. Instead of the fields all lining up under one another they seem to be attempting to position themselves one right after another and wrapping all the way down the window.
Here is the code element for the feature in question followed by the CSS...
HTML
<form id="defaultform" class="rounded" name="form2" method="post" action="<?php echo $editFormAction; ?>">
<h3>Contact Form</h3>
<div class="field">
<label for="hostess_fname">First Name:</label>
<input type="text" class="input" name="hostess_fname" value="" id="hostess_fname" />
<p class="hint">Enter your name.</p>
</div>
<div class="field">
<label for="email">Last Name:</label>
<input type="text" class="input" name="hostess_fname" value="" id="hostess_lname" />
<p class="hint">Enter your email.</p>
</div>
<input type="submit" value="Lookup Hostess" />
<input type="hidden" name="Lookup" value="form2" />
CSS
#defaultform {
width: 500px;
padding: 20px;
background: #f0f0f0;
overflow:auto;
/* Border style */
border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
/* Border Shadow */
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}
label {
font-family: Arial, Verdana;
text-shadow: 2px 2px 2px #ccc;
display: block;
float: left;
font-weight: bold;
margin-right:10px;
text-align: right;
width: 120px;
line-height: 25px;
font-size: 15px;
}
#defaultform.input{
font-family: Arial, Verdana;
font-size: 15px;
padding: 5px;
border: 1px solid #b9bdc1;
width: 300px;
color: #797979;
}
.hint{
display: none;
}
.field:hover .hint {
position: absolute;
display: block;
margin: -30px 0 0 455px;
color: #FFFFFF;
padding: 7px 10px;
background: rgba(0, 0, 0, 0.6);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
I just updated the code with more of the HTML from a shorter form that I was trying with the same CSS. I also added some more of the CSS code. I'm getting the same behavior. I'm still confused on selectors and how those are defined and stuff.
I see what you're doing now that you've added your code. It's a pretty simple fix, but hard to catch:
CSS
.field{
clear:both;
}
Here's the jsFiddle