I am trying to create separate page for mobile view it should be hidden for
desk top see my css and html whats wrong in this code ?
Code:
<form class="form-signin-login" method="post" id="login-form">
<input type="text" name="user_entered_id" id="user_entered_id" value="Email (or) Phone No" onblur="if(this.value=='') this.value='Email (or) Phone No'" onfocus="if(this.value =='Email (or) Phone No' ) this.value=''">
<input type="password" name="lgpassword" id="lgpassword" value="Password" onblur="if(this.value=='') this.value='Password'" onfocus="if(this.value =='Password' ) this.value=''">
<input type="submit" class="button" name="submit" value="Login">
</form>
<style>
body{
background-color:#000;}
#media screen and (max-width:300px) {
.input[type=text], .input[type=password]{width: 100%;
padding: 12px 20px;
background-color:#000;
color:#fff;
outline:none;
border: none;
border-bottom: 1px solid #fff;
margin: 8px 0;
-webkit-box-shadow: 0 0 0px 1000px black inset;
-webkit-text-fill-color: white !important;
}
}
</style>
You need to just add the following in to css
.form-signin-login { display: none;}
#media screen and (max-width:300px) {
.form-signin-login { display: inline;}
}
Here is the working sample :https://jsfiddle.net/6sz8rnb2/1/
#media add min-width and max-width (for mobil and desktop), to hide use property visibility (value: visible | hidden | collapse | inherit |);Note: All other elements on the page do not change their position.
Related
I have email input with background image as symbol on it. The issue is input works properly if user adds data but if they choose to select suggestions provide by browser, the image just hides.
See below HTML and CSS.
.login-form-email {
border-radius: 6px;
background-color: #fff;
background: url(img/envelop.png) no-repeat scroll 7px 7px;
padding-left: 40px;
}
<div class="form-group">
<label class="short-description"> Email </label>
<input id="username" name="username" type="text" class="form-control login-form-email" autocomplete="off" required>
</div>
This snippet might not work but I'll add snapshot of how it looks.
Here is the image 1 on how it looks initially.
Now, when I select the autosuggestion, it weirdly looks like this. (See envelop symbol is removed.)
You can wrap <input/> element in <div> and add styles to div::before. if you do it in this way, your input will be responsive also.
With -webkit-autofill you can change autocomplete styles in Webkit browsers.
.input-wrapper{
display: inline-block;
margin-left:-25px;
}
.input-wrapper::before {
content: "";
background: url(https://img.icons8.com/external-justicon-flat-justicon/64/000000/external-email-notifications-justicon-flat-justicon.png) no-repeat scroll 0px 0px;
background-size: 20px 20px;
padding-left: 30px;
position: relative;
left: 15%;
}
.login-form-email{
border-radius: 6px;
padding:5px 10px 5px 28px;
}
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px white inset !important;
box-shadow: 0 0 0 30px white inset !important;
}
<div class="form-group">
<label class="short-description" for="email"> Email </label>
<div class="input-wrapper">
<input
id="email"
name="email"
type="email"
class="form-control login-form-email"
required
/>
</div>
</div>
this is because of when you select the suggestion value it will be autofill the field and the browser has the default autofill background property.
you have used the sort-hand property for the background so when you autofill the field value the background property will changed.
please use separated properties for that like this way.
.login-form-email {
border-radius: 6px;
background-color: #fff;
background-image: url(img/envelop.png);
background-repeat: no-repeat;
background-position: 7px 7px;
padding-left: 40px;
}
The problem is that currently the browser's default styling for this can not be overridden, or there is no direct solution to do so, see here:
How to avoid "-internal-autofill-selected" style to be applied?
The alternative solution is to use a before element, like so:
.form-group:before {
content: "";
background: url(https://emojipedia-us.s3.amazonaws.com/source/skype/289/envelope_2709-fe0f.png) no-repeat scroll 0px 0px;
padding-left: 20px;
background-size: 20px 20px;
z-index: 999;
position: relative;
left: 65px;
}
.login-form-email{
text-indent: 30px;
}
<div class="form-group">
<label class="short-description"> Email </label>
<input id="username" name="username" type="text" class="form-control login-form-email" autocomplete="off" required>
</div>
if you want to change the background color of auto-filled input you need to use these:
UPDATED:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-box-shadow: 0 0 0 30px white inset !important;
background: url(https://img.icons8.com/external-justicon-flat-justicon/64/000000/external-email-notifications-justicon-flat-justicon.png) no-repeat scroll 0px 0px;
background-size: 20px 20px;
}
Am trying to make my fieldset data to be at center of the page but it displays in my page towards left. It displays fine fiddle, http://fiddle.jshell.net/8SuLK/ but not displaying to center of page in browser. How to go about.
Thanks in advance.
Remove position from fieldset and try like this: DEMO
CSS:
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px auto;
text-align:center;
display:block;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
width:70%;
border: 2px groove threedface;
}
If you don't need to have your fieldset positioned as fixed then you can center it in two ways.
1) Setting a width to your fieldset and add auto to its margin property.
EXAMPLE
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
border: 2px groove threedface;
width:75%;
}
DEMO http://fiddle.jshell.net/8SuLK/3/
2) Adding a wrapper to your fieldset and set it as text-align:center; and then set display:inline-block; to the fieldset.
EXAMPLE
<div class="wrapper">
<fieldset>
<label>First Name:</label>
<input type="text" />
<label>Middle Name:</label>
<input type="text" />
<label>Last Name:</label>
<input type="text" />
<label>Date of Birth:</label>
<input type="date" />
</fieldset>
</div>
.wrapper{text-align:center;}
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
display:inline-block;
border: 2px groove threedface;
}
DEMO http://fiddle.jshell.net/8SuLK/4/
PS. Just a reminder in your jsfiddle you can see the syntax highlighter showing in red the syntax errors. In your case the last closing tag, </fieldset> was in red because each input tag wasn't closed. Remember the right syntax for input is <input type="text" />.
Furthermore it's good practice to add the id to each input <input type="text" id="firstname" /> and then specify what the label is for like <label for="firstname">First Name</label>
I have done the following with my forms:
Noe everything is fine when I have it on a large screen. But when I test it in my ripple emulator in the browser I get this, the screen size was a 240x320:
Here is my CSS:
.inputbox{
width: 80%;
border: 1px solid #d4d4d4;
border-bottom-right-radius: 2em;
border-top-right-radius: 2em;
box-shadow: inset 0px 2px 2px #ececec;
display: inline;
padding: 8px;
font-size: 100%;
margin-top: 0px;
margin-bottom: 1%;
}
.labelbox{
border-bottom-left-radius:2em;
border-top-left-radius: 2em;
padding: 8px;
display: block;
border: 1px solid #d4d4d4;
background: #e9f939; /* Old browsers */
padding-right: 5px;
color:black;
float:left;
width:17.5%;
text-align: center;
}
Here is my HTML:
<label class="labelbox" for="textareacontactus">Enter Title*</label>
<input type="text" class="inputbox" data-role="none" ng-model="searchtitle" name="searchtitle" id="searchtitle" required>
<label class="labelbox" for="searchauthor">Enter Author</label>
<input type="text" class="inputbox" data-role="none" name="searchauthor" id="searchauthor">
<label class="labelbox" for="searchpublisher">Enter Publisher</label>
<input type="text" class="inputbox" data-role="none" name="searchpublisher" id="searchpublisher">
<label class="labelbox" for="searchedition">Enter Edition</label>
<input type="text" class="inputbox" data-role="none" name="searchedition" id="searchedition" ng-model="searchedition" ng-pattern="/^[0-9]+$/">
Now in the CSS I used width but using the %. So I can't see why its doing this? I would assume by using % it will always take up say 20% relative to the screen size because if this was the case then why does it do this on the emulator? What is the best practice to ahieve this responsive design?
You can use media queries such as #media (max-width: 767px)
Another thing you could try is using an HTML table like in this JSFiddle I made from your existing code: http://jsfiddle.net/ALYxt/
Can anyone explain why on the 3rd line of the CSS in this JFiddle demo why the div ID of #form_container requires a height in order for the background to show if a float:left is specified at line 14?
I thought floats did not remove objects from the flow of the browser...
<div id="form_container">
<form id="contact_form" action="#" method="get" accept-charset="utf-8">
<p>
<label for="byour_name">Name:</label>
<input type="text" name="byour_name" value="" id="byour_name">
</p>
<p>
<label for="byour_email_address">Email:</label>
<input type="text" name="byour_email_address" value="" id="byour_email_address">
</p>
<p>
<label for="subject">Subject:</label>
<input type="text" name="formsubject" value="" id="form_subject">
</p>
<p>Message:
<br/>
<textarea id="form_messagebox" name="Message" rows="20" cols="25"></textarea>
</p>
<p>
<input id="submitBtn" type="submit" value="Send it!">
</p>
</form>
CSS
#form_container {
width: 300px;
/* height: 300px; Background works with this uncommented if the float is enabled*/
border: 2px red solid;
padding: 0 10px 0 10px;
background-color: red !important;
}
#form_container form {
color: black;
}
#form_container input, p {
margin: 0;
padding 0;
float:left; /* This breaks the background */
display:inline;
}
#form_container label {
width: 200px;
position:relative;
}
#submitBtn {
}
#contact input, textarea {
box-sizing: border-box;
color: rgb(0, 0, 0);
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 4px 0px;
background-color: rgb(221, 220, 219);
font: normal normal normal 16px/1.3em'open sans', sans-serif;
border: 0px solid rgb(192, 185, 181);
}
#form_messagebox {
height: 150px;
width: 200px;
}
here is fiddle of your que see this
http://jsfiddle.net/jkkheni/eJS6b/3/
added a css class of clear
.clear{ clear:both; height:0px; width:0px; display:table; content:"";}
and added a div in your html
<div class="clear"></div>
before closing div with id form_container
when you use float always clear all float.
or you can also use overflow:hidden in div with form_container id
float removes height of the element if it is not specified.
Try:
#form_container{
overflow:hidden;
}
DEMO here.
OR
clear floats after finishing form:
<div class="clr"></div>
.clr{clear:both;}
DEMO here.
I have a search box like below and i am using bootstrap to give a flexible layout. How can use a design like below and make sure i can get a stretchable search box.
You'd need a container to put your input box in, and put a front and end div to it. Depending on browser compatibility you might want to add a few more div's to make sure your input box is shown properly in browsers like IEX7/8 though.
So you'd have the following:
<form class="searchbox">
<input type="text" class="text" />
<input type="submit" class="submit" />
</form>
Accompanied by the following example CSS
form.searchbox { background:url(leftside_image.gif) 0 0 no-repeat; padding-left:15px; }
form.searchbox input.text { border:none; border-top:1px solid #999; border-bottom:1px solid #999; height:25px; line-height:25px; padding:0 5px; }
form.searchbox input.submit { background:url(rightside_image.gif); }
Add your Html part like this
<div class="searchbox">
<input class="lightsearch" type="text" name="s" onfocus="doClear(this)" value="">
</div>
css part, download a search box image and replace it with the name
.searchbox input.lightsearch {
background: url("images/lightsearch.png") no-repeat scroll 0 0 transparent;
border: 0 none;
color: #575757;
font-size: 11px;
height: 19px;
margin-top: 24px;
padding: 2px 5px 2px 24px;
width: 170px;
}