Basic input fields of type Password display badly on safari 9.1
The problem is the 'Key' in safari. This is my html:
<div class="form-group">
<input type="password" class="form-control" placeholder="Wachtwoord *" name="password" required="">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Bevestig wachtwoord *" name="password_confirmation" required="">
</div>
Chrome:
Safari
Setting height:100%'; will fix the problem but this obviously changes the height of the field, which is not what i want.
Css:
input[type="text"], input[type="email"], input[type="password"] {
display: block;
width: 100%;
vertical-align: middle;
border: 1px solid #cbcbcb;
outline: 0;
box-shadow: none;
padding: 12px;
-webkit-transition: all .35s;
-moz-transition: all .35s;
-ms-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.form-control {
border: 1px solid #cbcbcb;
border-radius: 0;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
Removing the padding from the input object was the solution.
input[type="password"] {
padding: 12px;
}
I had exactly the same problem and searched high and low for a solution which in the end turned out to be as easy as: line-height: normal;
This seems to work across browsers for me .. hope you get the same result!
Related
I'm styling a text input field and the point is for the border and text to change colour when it's focused.
The problem: When I set the styles for "border-bottom" on the initial state, the transition doesn't work.
I messed around in dev tools a bit and when I remove the initial border-bottom, the transition works fine. But I want to still keep my initial border styles, so I'm not sure what's going on here.
I've had a search and experimented for a couple of days, but nothing really worked or helped. So if someone knows the problem, it'd be greatly appreciated!
.contactInput {
color: #555;
padding: 7px 0;
background-color: rgba(0,0,0,0);
font-style: normal;
font-weight: 400;
line-height: 20px;
font-size: 14px;
border-bottom: 2px solid #555;
outline: none;
transition: all 0.2s ease-in;
}
.contactInput:focus {
color: #000;
font-weight: 600;
border-bottom: 2px solid #000;
transition: all 0.2s ease-in;
}
<form>
<input placeholder="Name" class="contactInput" type="text" name="" id=""/>
<input placeholder="Email" class="contactInput" type="text" name="" id=""/>
</form>
Correct the border-bottom in focus.
.contactInput:focus {
border-bottom: 2px solid #000;
}
or you could just change border-color
.contactInput:focus {
border-bottom-color: #000;
}
Hope this resolves your problem
Actually it's working but you can't see. Because it have to different pixel when start and finish. for example =>
.contactInput {
color: #555;
padding: 7px 0;
background-color: rgba(0,0,0,0);
font-style: normal;
font-weight: 400;
line-height: 20px;
width:200px;
font-size: 14px;
border-bottom:1px solid #000;
outline: none;
transition: all 0.2s ease-in;
}
.contactInput:focus {
color: #000;
font-weight: 600;
border-bottom: 3px solid #000;
transition: all 0.2s ease-in;
}
<form>
<input placeholder="Name" class="contactInput" type="text" name="" id=""/>
<input placeholder="Email" class="contactInput" type="text" name="" id=""/>
</form>
1) You can use ::placeholder selector to change input's placeholder color.
.contactInput::placeholder {
color: #555
}
And when focused,
.contactInput:focus::placeholder {
color: #000
}
2) Your border-color animation works. Because you select colors close to each other, you may not notice the color change.
Working snippet below:
.contactInput {
color: #000; /* text color */
padding: 7px 0;
background-color: rgba(0,0,0,0); /* you can use #FFF shortly */
font-style: normal;
font-weight: 400;
line-height: 20px;
font-size: 14px;
border: 2px solid transparent; /* added this for transparent borders */
border-bottom-color: #555; /* changed this */
outline: none;
transition: all 0.2s ease-in;
}
.contactInput:focus {
/* remove this color: #000; it is not necessary */
font-weight: 600;
border-bottom-color: #000; /* changed this */
/* remove this transition: all 0.2s ease-in; */
}
/* normal placeholder color */
.contactInput::placeholder {color:#555;opacity:1}
.contactInput:-ms-input-placeholder{color:#555}
.contactInput::-ms-input-placeholder{color:#555}
/* placeholder color when focused */
.contactInput:focus::placeholder {color:#000;opacity:1}
.contactInput:focus:-ms-input-placeholder{color:#000}
.contactInput:focus::-ms-input-placeholder{color:#000}
<form>
<input placeholder="Name" class="contactInput" type="text" name="" id=""/>
<input placeholder="Email" class="contactInput" type="text" name="" id=""/>
</form>
what's the wrong? i think your code is working as right. This way you can see better.
.contactInput {
color: #555;
padding: 7px 0;
background-color: rgba(0,0,0,0);
font-style: normal;
font-weight: 400;
line-height: 20px;
font-size: 14px;
border-bottom: 2px solid #555;
outline: none;
transition: all 0.2s ease-in;
}
.contactInput:focus {
color: #000;
font-weight: 600;
border-bottom: 2px solid #000;
transition: all 0.2s ease-in;
}
<form>
<input placeholder="Name" class="contactInput" type="text" name="" id=""/>
<input placeholder="Email" class="contactInput" type="text" name="" id=""/>
</form>
What piece of code "deleted" the hint about required field?
https://jsfiddle.net/venntr/qegxnjm2/
<div class="switch-field">
<input type="radio" id="onlinetak" name="online" required/>
<label for="onlinetak">Online</label>
<input type="radio" id="onlinenie" name="online" required />
<label for="onlinenie">Offline</label>
</div>
The first thing to fix is that it is not in a form tag, as was pointed out by Leon.
What's happening is that your CSS is styling your HTML labels, not your radio inputs, to be selected. You set the inputs to be display: none, so the associated errors with there being no input do not display. You need to show the inputs and edit the styling of the inputs themselves so that the error properly appears if there is no input.
EDIT: Here's an example of your code that will work with what I said.
body {
background-color: #F7FCFF;
}
.QA radio {
-webkit-appearance: none;
background-color: #e1e1e1;
border: 4px solid #e1e1e1;
border-radius: 10px;
width: 100%;
display: inline-block;
position: relative;
width: 20px;
height: 20px;
}
.QA radio:checked {
background: grey;
border: 4px solid #e1e1e1;
}
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);
}
.QA {
font: normal normal 14px/1 Helvetica;
margin: 1px;
border-radius:10px;
text-align:center;
}
.QA1 {
font: normal normal 14px/1 Helvetica;
border-radius:10px;
text-align:left;
}
.QA h2{
font: normal normal 16px/1 Helvetica;
font-weight: bold;
color:#004E97;
}
.QA button{
text-align:center;
width: auto;
background: #E2F4FE;
font-weight: bold;
font-size: 14px;
text-shadow: none;
color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
cursor: pointer;
padding: 6px 14px;
margin: 2px;
outline: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.QA1 button{
text-align:left;
width: auto;
background: #E2F4FE;
font-weight: bold;
font-size: 14px;
text-shadow: none;
color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
cursor: pointer;
padding: 6px 14px;
margin: 2px;
outline: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.QA button:hover{
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; background: #C1EEFE;
}
.QA1 button:hover{
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; background: #C1EEFE;
}
textarea {
background-color: #FFFFFF;
}
.index {
z-index: 55;
}
.switch-field {
font-family: Helvetica;
padding: 10px;
overflow: hidden;
font-size:0px;
}
.switch-title {
margin-bottom: 6px;
}
.switch-field .input-field {
text-align:center;
display: inline;
width: auto;
background-color: #F2F0F0;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
font-weight: bold;
text-shadow: none;
padding: 6px 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked + label {
background-color: #5EA8EE;
-webkit-box-shadow: none;
box-shadow: none;
}
.switch-field .input-field:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field .input-field:last-of-type {
border-radius: 0 4px 4px 0;
}
#onlinetak:checked + label:first-of-type { background-color:#5EA8EE; }
#onlinenie:checked + label:last-of-type { background-color:#EE5B5B; }
<form>
<div class="switch-field">
<div class="input-field">
<input type="radio" id="onlinetak" name="online" required/>
<label for="onlinetak">Online</label>
</div>
<div class="input-field">
<input type="radio" id="onlinenie" name="online" required/>
<label for="onlinenie">Offline</label>
</div>
</div>
<button type="submit">Submit</button>
</form>
EDIT 2: Another (admittedly hacky) way of doing it is to set a negative z-index on the inputs themselves so that they don't appear to be inside the labels themselves. The error still shows near the input group, but the inputs are "under" the labels (and not set to display: none), so the error displays where the inputs are.
.switch-field input {
position: absolute;
z-index: -10000;
}
Your code may need to be in a form in order for your required to work.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="switch-field">
<form>
<input id="onlinetak" name="online" type="radio"> <label for="onlinetak">Online</label> <input id="onlinenie" name="online" type="radio"> <label for="onlinenie">Offline</label> <button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Jsfiddle - https://jsfiddle.net/qegxnjm2/1/
enter code here
Online
Offline
Is it possible to scale a text input only on the X axis while maintaining the size of the font?
I did something like this:
#searchInput {
text-decoration: none;
display: inline-block;
background-color: rgba(0, 0, 0, 0);
border: none;
border-bottom: 3px solid transparent;
width: 10px;
border-bottom-color: blue;
padding-left: 10px;
padding-bottom: 5px;
height: 40px;
font-size: 30px;
color: #307fff;
transition: 1s ease;
transform-origin: top left;
}
#searchInput:hover {
border-bottom: 3px solid blue;
transform: scaleX(25);
}
#searchInput:focus {
border-bottom: 3px solid blue;
transform: scaleX(25);
}
<input type="text" id="searchInput" name="search">
The result is the cursor on the middle of the input and the text stretched
Doing the same animation changing the width instead of scaling the input works, but I'm curious if it can be done with a transform.
Its not the correct way to implement this material type input text. Use background-position on :focus, :valid on the bottom border of input.
You should use something like the snippet below:
input::-webkit-input-placeholder, button {
transition: all 0.3s ease-in-out;
}
input {
margin: 40px 25px;
width: 200px;
display: block;
border: none;
padding: 10px 0;
border-bottom: solid 1px #1abc9c;
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
background-position: -200px 0;
background-size: 200px 100%;
background-repeat: no-repeat;
color: #0e6252;
}
input:focus, input:valid {
box-shadow: none;
outline: none;
background-position: 0 0;
}
input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
color: #1abc9c;
font-size: 11px;
transform: translateY(-20px);
visibility: visible !important;
}
<input placeholder="Username" type="text" required="">
Hope this helps!
I think you would need to work with the width rather than using scale. This way the input will change width without applying any scaling to its content.
#searchInput {
text-decoration: none;
display: inline-block;
background-color: rgba(0, 0, 0, 0);
border: none;
border-bottom: 3px solid transparent;
width: 10px;
border-bottom-color: blue;
padding-left: 10px;
padding-bottom: 5px;
height: 40px;
font-size: 30px;
color: #307fff;
transition: 1s ease;
}
#searchInput:hover {
border-bottom: 3px solid blue;
/*
Instead of using scale just change the width
your transition will take care of animation
*/
width: 250px;
}
#searchInput:focus {
border-bottom: 3px solid blue;
width: 250px;
}
<input type="text" id="searchInput" name="search">
I have a search input box and currently when it is not selected it shows Search here but instead of text can I have an image?
code
<input id="autoComplete" type="text" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select='onSelect($item, $model, $label)' placeholder="Search here" typeahead-focus-first="true" ng-disabled="loading" ng-blur="autocompleteBlurred()" />
Here is a plunker link you can check.
You can do it directly using css
input#autoComplete {
background-image: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-16.png);
background-position: 10px center;
background-repeat: no-repeat;
border: 1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
padding: 10px 5px;
text-indent: 20px;
-webkit-transition: all 0.2s;
-moz-transition: all 2s;
transition: all 0.2s;
}
input#autoComplete:focus {
background-position: -20px center;
text-indent: 0;
}
Check this plunker
In case if you want text also do not remove placeholder="Search" from your input
HTML Code
<div class="container">
<div class="tip_text">D</div>
<div class="tip_content">test</div>
</div>
<br /><br /><br />
<div class="container">
<div class="tip_text">D2</div>
<div class="tip_content">test test test test test test test</div>
</div>
CSS Code
.container{
position: relative;
float: left;
}
.tip_text{
position: relative;
float:left;
width: 130px;
height: 30px;
margin: 0px;
padding: 2px;
text-align: left;
line-height: 28px;
font-size: 16px;
font-weight: bold;
border: 1px solid #acacac;
cursor:help;
}
.tip_content{
background: #333;
color: #fff;
padding: 10px 15px;
z-index: 98;
min-height: 15px;
position:absolute;
left: 100%;
font-size: 12px;
}
The above code has the following issue which I am trying to solve. The "tip_content" divs do not expand when a lot of text is placed into them. I cannot figure out why. I do not want to have a set width, I would prefer that they grow based on the amount of text put within. This should be happening by default as is the behavior of divs, but in this case it is not. If anyone has insight into this issue it would be greatly appreciated.
http://jsfiddle.net/Qyrjf/
white-space: nowrap;
This seems to fix the problem. Here is the full code in case people are interested in the application of the solution. It is using CSS and CSS3 to create tooltips.
HTML
<div class="container">
<div class="tip_text">D</div>
<div class="tip_content">test</div>
</div>
<br /><br /><br />
<div class="container">
<div class="tip_text">D2</div>
<div class="tip_content">test test test test test test test</div>
</div>
CSS (full)
.container{
position: relative;
float: left;
}
.tip_text{
position: relative;
float:left;
width: 130px;
height: 30px;
margin: 0px;
padding: 2px;
text-align: left;
line-height: 28px;
font-size: 16px;
font-weight: bold;
border: 1px solid #acacac;
cursor:help;
}
.tip_text:hover + .tip_content{
opacity: .9;
visibility: visible;
margin-left: 10px;
}
.tip_content:before{
border: solid;
border-color: transparent #333;
border-width: 6px 6px 6px 0;
content: "";
z-index: 99;
position:absolute;
left:-6px;
top:12px;
}
.tip_content{
background: #333;
color: #fff;
padding: 10px 15px;
z-index: 98;
min-height: 15px;
float: left;
left: 100%;
font-size: 12px;
position: absolute;
white-space: nowrap;
-moz-box-shadow: 2px 2px 2px #666;
-webkit-box-shadow: 2px 2px 2px #666;
box-shadow: 2px 2px 2px #666;
opacity: 0;
margin-left: 20px;
visibility: hidden;
-webkit-transition-property:opacity, visibility, margin-left;
-webkit-transition-duration:0.2s, 0.2s, 0.1s;
-webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
-moz-transition-property:opacity, visibility, margin-left;
-moz-transition-duration:0.2s, 0.2s, 0.1s;
-moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
-o-transition-property:opacity, visibility, margin-left;
-o-transition-duration:0.2s, 0.2s, 0.1s;
-o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
transition-property:opacity, visibility, margin-left;
transition-duration:0.2s, 0.2s, 0.1s;
transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
}