I have a simple input which contains an icon on the right side and text on the left side
Here is what I would like to have in mobile version:
here is what I have so far in desktop version
HTML
<div class="form_group">
<input id="input-icon" type="text" class="form_input " placeholder="W jakim celu z nami kontaktujesz?">
</div>
csss
#media only screen and (max-width: 768px) and (min-width: 375px)
.form_input {
font-size: 10px;
font-family: Roboto;
font-weight: normal;
width: 342px;
}
#input-icon {
background: url(../images/arrow-mobile.png) no-repeat scroll 7px 7px;
background-position: right;
/* opacity: 0.4; */
}
**
UPDATE
**
To simplify things here is my jsfiddle with the icon I am using :
http://jsfiddle.net/Mwanitete/z0x6uta2/2/
what do I need to do get what I want? I tried opacity but didn't work as expected?
.form_input {
font-size: 12px;
font-family: Roboto;
font-weight: normal;
width: 342px;
border: 1px solid #ccc;
border-radius: 5px;
}
#input-icon {
background: url(https://thumb.ibb.co/iAQtup/arrow_mobile.png) no-repeat scroll 7px 7px;
background-size: 7px;
background-position: right;
opacity: 0.4;
}
<div class="form_group">
<input id="input-icon" type="text" class="form_input " placeholder="W jakim celu z nami kontaktujesz?">
</div>
Result Preview:
You can also use this.
.form_input {
font-size: 10px;
font-family: Roboto;
font-weight: normal;
width: 342px;
border: none;
border-bottom: 1px solid;
}
#input-icon {
background: url('https://thumb.ibb.co/iAQtup/arrow_mobile.png') no-repeat scroll 7px 7px;
background-position: 100%;
background-size: 4%;
}
<div class="form_group">
<input id="input-icon" type="text" class="form_input " placeholder="W jakim celu z nami kontaktujesz?">
</div>
Here is solution based on Dementic's answer ,
.form_input {
font-size: 10px;
font-family: Roboto;
font-weight: normal;
width: 342px;
border: none;
border-bottom: 1px solid;
}
#input-icon {
background: url('https://thumb.ibb.co/iAQtup/arrow_mobile.png') no-repeat scroll 5px 5px;
background-position: right;
background-size: 12px;
height: 4px;
opacity: 0.4;
}
.form_input::-webkit-input-placeholder { /* WebKit browsers */
color: transparent;
}
jsfiddle for anyone interest to see the expected result
http://jsfiddle.net/Mwanitete/z0x6uta2/16/
Thanks all for help #StopActa2Though
you are able to change icon size inside the input field using background-size:20px;
example is given below according to your code
#input-icon {
background-size: 20px;
}
Related
I am trying to see how the page looks like on a 1366x768 laptop.
In Inspect device it looks perfectly fine:
But on the actual laptop, it looks like this:
So way off! :-/ It is very frustrating as I work on a big screen, and I cannot check it on the small laptop screen every minute.
How comes the page fits perfectly fine in the 1366x768's chrome device inspect but horribly on the actual 1366x768 screen?
Any tip what may be going on?
CSS:
/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
}
/* Control the right side */
.right {
right: 0;
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
color:black;
max-width: 560px;
min-width: 500px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border-color: #eee;
border-width: 1px;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.Forgot-Password {
font-family: "Roboto";
font-size: 17px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
margin-top:15px;
text-align: center;
color: #555556;
}
.form button {
font-family: "Roboto", sans-serif;
outline: 0;
background:#009bf7;
width: 100%;
border: 0;
padding: 15px;
font-size: 17px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
color:white;
}
.form button:hover,.form button:active,.form button:focus {
background:#0c6ea7
}
.form button:disabled {
background: #dddddd;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
The HTML markup:
<div class="split left">
<div class="centered">
<div style="margin-bottom:60px">
<img class="img-responsive" src="images/fineon.png" alt="Fineon"> </div>
<style>
.navbar {
display: none;
}
.navbar-primary {
display: none;
}
</style>
<div ng-controller="login-controller" ng-init="initLoginPage()">
<div align="center">{{message}}</div>
<form class="login-form form">
<p class="form-login-title" dir="{{pageInfo.direction}}">{{gs("signIn", "Sign in")}}</p>
<hr style="margin-right:370px;border: 1px solid black;" width="15%">
<div class="form-field">
<input dir="{{pageInfo.direction}}" type="text" name="first_name" id="first_name" required ng-model="user.email">
<label for="first_name">{{gs("emailAddress", "Email Address")}}</label>
</div>
<div class="form-field">
<input dir="{{pageInfo.direction}}" type="text" name="first_name" id="first_name" required ng-model="user.password">
<label for="first_name">{{gs("password", "Password")}}</label>
</div>
<button ng-disabled="crisperSessionId == undefined" dir="{{pageInfo.direction}}" ng-click="login()"
type="submit">{{gs("signInButton", "Sign in")}}</button>
<p class="Forgot-Password"><a class="Forgot-Password" href="#/loginForgot">Forgot my password</a></p>
</form>
</div>
</div>
<div class="split right ">
<div class="centered">
<h4 class="Fineon-Exchange">Fineon</h4> <br>
<p class="Export-Receivable-Finance-Marketplace" >Trade Finance & Marketplace</p>
<div style="width:70px; margin-top:50px">
<hr style="border: 1px solid white;">
</div>
</div>
</div>
</div>
Although I am not a hard core programer or any expert, but I think I know what might be wrong. The Inspect Element of your browser shows your page in a 1366x768 resolution. Whereas on the laptop, you are actually viewing the page in 1366-(top and bottom toolbars pixels) x 768-(scroll bar width pixels) resolution. So, the laptop has resolution of 1366x768 but actual displayable resolution is lesser than that and, in my opinion, is the problem.
Now you can either get the actual displayable resolution from the laptop and set as custom resolution in your chrome inspect tool or press f11 on your laptop to see the page in actual 1366x768 resolution.
I'm stuck on a styling issue with WP's contact form 7 plugin again.
This screenshot shows how it looks - apparently, it's set to "width: 100" but the button is centred - so, it's not at 100%.
The code I used for my contact form is this:
/* my custom css*/
input[type=submit] {
background: none;
color: #1fbba6;
border: 2px solid #1fbba6;
border-radius: 50px !important;
padding: 14px 14px;
font-weight: 400;
font-size: 12px;
width: 140px !important;
}
.wpcf7 {
width: 100%;
}
input[type=select] {
width: 100% !important;
color: #d9d9d9;
}
input.wpcf7-form-control.wpcf7-submit:hover {
background: none;
color: #1fbba6;
}
.wpcf7-form select {
width: 100% !important;
}
/* classes that are provided from my theme*/
#media screen and (-webkit-min-device-pixel-ratio: 0)
template.min.css?ver=4.15.13:1
.kl-fancy-form-select {
height: 52px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: inset 1px 2px 0 rgba(0,0,0,.06);
background-image: url(../images/select-arrow.svg);
background-repeat: no-repeat;
background-size: 6px 12px;
background-position: calc(100% - 10px) 50%;
background-position-y: center;
background-position-x: calc(100% - 10px);
}
<label>[text* your-name placeholder "Dein Name*"] </label>
<label>[email* your-email placeholder "Deine E-Mail*"] </label>
<label>[tel phone placeholder "Telefon"]</label>
<label>[select* class:zn_form_input class:form-control--light class:kl-fancy-form-select training "Ich interessiere mich für:" "Personal Training" "Mini-Kurse" "Rückbildung" "Sonstiges"]</label>
<label>[textarea your-message placeholder "Deine Nachricht"] </label>
<center>[submit "Nachricht senden"]</center>
Why is it not accepting my "width: 100%!important;"? What can I do to make it accept that?
Thank you for your help!
Check boxes are working fine in chrome but not in internet explorer.
Here is my HTML code:
<div class="patient-div-w" style="width: 9.5vw;">
<input type="checkbox" id="edema" class="input-checkbox-l">
<label class="label-n" for="edema" style="line-height: 8vh;">Edema</label>
<br>
</div>
Here is my CSS code:
input[type="checkbox"] {
opacity: 0;
margin: 0px 3px 0px 0px;
}
.input-checkbox-l[type="checkbox"] + label {
background-image: url(../images/unchk.png);
background-size: 1.2vw;
background-repeat: no-repeat;
padding-left: 1.7vw;
background-position: 0vh 0vw;
width: 8vw;
margin: 0vw;
position: relative;
top: -.1vh;
left: -1.6vw;
white-space: nowrap;
font-family: "Roboto Regular";
}
.label-n {
font-size: 1vw;
color: #000;
}
The same is the problem with radio buttons.
Any kind of help is highly appreciated.
Try this:
Lets assume the parent of .patient-div-w is .parent-div. So we need to do the following:
.parent-div{
overflow: auto;
zoom: 1;
}
This is a very common issue. You can read more about it here
Try this
In your code
<label class="label-n" for="edema" style="line-height: 8vh;">Edema</label> Just remove inline style="line-height:8vh;. it will work.
you can use below code as a reference and it will work IE, FF, Chrome
.input-checkbox-l[type="checkbox"] + label {
box-sizing:border-box;
padding:0px 20px 0px 55px;
background:url(https://i.stack.imgur.com/EAkMC.png) no-repeat center left 5px;
background-size: 30px;
font-size:22px;
margin-right:5px;
display:inline-block;
}
You can try without image
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #ccc;
cursor: pointer;
outline: none;
}
input[type="checkbox"]:checked {
border:1px solid blue;
outline: none;
}
div{
display: inline-block;
}
div span{
vertical-align: super;
}
HTML
<div>
<input type="checkbox" name="" value="1"><span>Label name</span>
</div>
Hi i want to style an input submit button which has a background as given in the attached image.The back ground image was provided, but im not sure how to implement it in the submit button so instead of using that image i tried using the css 3 color gradient properties to style the button,however, i cant get the desired color output.Any help is welcome.
CSS code so far.
.button {
-moz-border-radius: 18px;
-moz-box-shadow: #fffff 0px 0px 11px;
-webkit-border-radius: 18px;
-webkit-box-shadow: #6E7849 0 0 10px;
background-color: #fefefefe;
background-image: -moz-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: -ms-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: -o-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: -webkit-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: linear-gradient(24deg, #d8d8d8, #fefefefe);
border-radius: 18px;
border: 1px solid #888888;
box-shadow: #fffff 0px 0px 11px;
color: #000000;
display: inline-block;
font-size: 3em;
margin: auto;
padding: 4px;
text-decoration: none;
}
Use the image. Matching the gradient fully to the image is an unnecessary pain:
.button {
display:block;
width:50px; //use actual image width
height:50px; // use actual image height
background:url(../img/button.png); //image file path
}
.button:hover {
background:url(../img/button_hover.png);
}
To use an image as the input is very simple:
<input type="image"src="/images/submit.gif" />
Finally i found the way to make this button using sliding door technique.However still in jeopardy to style it in disabled state.
This link helped me alot http://www.springload.co.nz/love-the-web/dynamic-submit-buttons
css
div.submit_button {
background: transparent url('common/images/bg-submit2.png') no-repeat 0 0;
display: block;
float: left;
height: 27px; /* total height of the button */
padding-left: 15px; /* end width */
}
span.submit_button_end {
background: #fff url('common/images/bg-submit2.png') no-repeat 100% 0; /* used a sprite image */
display: block;
float: left;
font-weight: normal;
height: 27px; /* total height of the button */
}
input.submit_input {
font-size: 13px;
font-weight:bold;
background: none;
border: none;
padding: 0 0 2px 15px; /* end width */
color: #1b1d60;
cursor: pointer;
position: relative;
height: 25px;
line-height: 25px;
left: -15px;
margin-right: -15px;
padding-right: 15px;
}
input.submit_input:hover {color: #fff;}
div.submit_button:hover {background-position: 0 100%;}
div.submit_button:hover span.submit_button_end {background-position: 100% 100%;}
HTML
<div class='submit_button'>
<span class='submit_button_end'>
<input class='submit_input' type='submit' value='Submit button' tabindex='#' />
</span>
</div>
Hey guys I'm making a new layout for my community and now I'm slicing him into pieces. Their is only 1 problem I designed a textfield where the user can search but there are 2 links right after the textfield. I don't know how to let them stick together. I've tried something and it actually works in google chrome, but in it doesn't.
.searchbox {
background: url('../images/searchbox.gif') no-repeat;
border: 0px;
height: 24px;
width: 308px;
font-size: 11px;
padding: 1px -15px 0px 10px;
}
.options {
background: url('../images/options_active.gif') repeat-x;
background: url('../images/options.gif') repeat-x;
font-size: 10px;
padding: 6px;
margin: 0 0 0 -10px;
color: #6b6b6b;
}
.options:active {
background: url('../images/options_active.gif') repeat-x;
color: #000;
}
.button {
background: url('../images/button_bg_active.gif') repeat-x;
background: url('../images/button_bg.gif') repeat-x;
color: #fff;
font-weight: bold;
font-size: 11px;
padding: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
}
.button:active {
background: url('../images/button_bg_active.gif') repeat-x;
}
this is what I've got in my css file
this is my html file:
<div id="topbar">
<form method="post" action="">
<input type="text" class="searchbox" name="searchbox" value="Zoek events, nieuws, dj's, foto's en veel meer..." />
Advanced options
Zoeken!
</form>
</div>
Here is what it looks in firefox:
alt text http://img411.imageshack.us/img411/8282/searchj.png
and this is what it looks in chrome:
alt text http://img22.imageshack.us/img22/2655/searchchrome.png
To start with you might also want to use -webkit-border-top-left-radius: 5px and -webkit-border-bottom-left-radius: 5px to get that same effect with Chrome and Safari.
I would do something like the following:
.form {
position: relative; /* Alows you to absolutely position child elements */
}
.searchbox {
float: left;
position: absolute;
}
.options, .button {
float: right;
position: absolute;
}
.options {
right: -30px; /* Width of the button to its right */
}