I got the following html:
<div class="inputContainer">
<div class="inputPlaceholder">Hello world</div>
<input type="text" class="input" />
</div>
The following css:
.inputContainer{ position: relative; background-color: green; }
.input { position: absolute; top: 0px; left: 0px; background: transparent none; -webkit-appeareance: none; }
.inputPlaceholder { position: absolute; top: 0px; left: 0px; color: gray }
And the following js:
$('.inputContainer .input').keyup(function(){
$(this).parent().find('.inputPlaceholder').hide();
if($(this).val() == ''){
$(this).parent().find('.inputPlaceholder').show();
}
});
The problem is with IE, you cannot focus on the input text because of the z-index of the placeholder, I have tried to put the .inputPlaceholder z-index to -1 and .input to 100 but nothing is working, it is working perfect in other browsers though, I know that Foursquare used this same technique on their searchbox.
How can I solve this problem, and what is causing it?
Re-arrange your HTML to "naturally" change the stacking order:
<div class="inputContainer">
<div class="inputPlaceholder">Hello world</div>
<input type="text" class="input" />
</div>
It's quite old question, but I had the same problem with IE 9. Solution is to add 'fake' background color, for example:
input{
background-color: rgba(0,0,0,0);
}
Important: background can't be set to transparent property, it has to be transparent with rgba
Related
I need to hide a newsletter form when the user press the sign up button ("Cadastrar" in portuguese) and this is already happening as you may check on my website. However, the success message is rendered with unnecessary line breaks. Why?
I need to fill the entire height of the footer (without fixing the height in the child div, if possible), but the text should be vertically centered in the red box.
You'll probably find easy to check the problem by going to my website, filling the email address field and clicking the button bellow, but here is the HTML rendered there.
<div id="mc4wp-form-1" class="form mc4wp-form mc4wp-form-3571 mc4wp-ajax mc4wp-form-success">
<form method="post" lpformnum="1" _lpchecked="1">
<input type="email" name="EMAIL" class="text" placeholder="Seu email" required="">
<input type="submit" class="bt" value="Cadastrar"><span class="mc4wp-ajax-loader" style="display: none; vertical-align: middle; height: 16px; width: 16px; border: 0px; margin-left: 5px; background: url(/img/ajax-loader.gif) 50% 50% no-repeat;"></span>
<div style="position: absolute; left: -5000px;">
<input type="text" name="_mc4wp_required_but_not_really" value="" tabindex="-1">
</div>
</form>
<div class="mc4wp-response">
<div class="mc4wp-alert mc4wp-success">Obrigado, seu cadastro foi efetuado com sucesso! Por favor verifique seu e-mail.</div>
</div>
</div>
Here is an attempt to reproduce on jsfiddle.
Possible solution add float: left; property to mc4wp-error selector
.mc4wp-error {
background-color: #FEE7ED;
color: #F41952;
border-color: #F41952;
float: left; <----Add this
}
Reason why text is breaking
Newsletter, input and button pushing and breaking the text
Remove float:left from
footer form {
width: 100% !important;
float: left !important; <---Remove this
}
.mc4wp-alert {
position: absolute;
top: 0px;
min-height: 200px;
}
Mobile view and CSS changes max-width:480px
#media (max-width: 480px) {
footer form {
float: left !important; <---Remove this
}
.mc4wp-alert {
position: absolute;
top: inherit;
min-height: 200px;
bottom: -90px;
}
}
If you change:
.mc4wp-alert {
...
...
position: relative;
}
to position: fixed;, you will find that the space is actually occupied by the email text-box and the button. The solution is to use position: absolute;. I tested it in Chrome and IE11.
Is it possible to insert units inside an input element? Inside the <input> element is preferred, but outside is acceptable.
You can use something like this.
Outside box:
<input></input><span style="margin-left:10px;">lb</span>
Inside box:
<input style="padding-right:20px; text-align:right;" value="50"></input><span style="margin-left:-20px;">lb</span>
Fiddle
You can make use of bootstrap input-group component.
Note: The example below uses bootstrap 4 classes
<div class="input-group">
<input type="number" class="form-control">
<div class="input-group-append">
<span class="input-group-text"> m </span>
</div>
</div>
Here is the result below:
I would do this by nudging an extra element (like a span) over the input using position: relative and left: -20px.
Then some padding-right on the input element to ensure that the user's input wont overlap on the new element.
Example here:
https://jsfiddle.net/peg3mdsg/1/
If you want the units to show up right beside the number, you can try this trick (https://jsfiddle.net/ccallendar/5f8wzc3t/24/). The input value is rendered in a div that is positioned on top of the input, with the value part hidden. That way the units are positioned correctly. Just make sure to use the identical styles (font sizes, colors, padding etc).
const input = document.getElementById("input");
const hiddenValue = document.getElementById("hiddenValue");
const unitsValue = document.getElementById("unitsValue");
input.addEventListener("input", () => {
hiddenValue.innerHTML = input.value;
// Only show units when there is a value?
// unitsValue.innerHTML = (input.value.length > 0 ? " km" : "");
});
.wrapper {
position: relative;
width: 80px;
}
#input {
border: 2px solid #fee400;
background-color: #373637;
width: 100%;
font-family: serif;
font-size: 18px;
line-height: 25px;
font-weight: normal;
padding: 3px 3px 3px 10px;
color: white;
}
.units {
position: absolute;
top: 0;
left: 0;
right: 10px;
bottom: 0;
pointer-events: none;
overflow: hidden;
display: flex;
/* Match input styles */
font-family: serif;
font-size: 18px;
line-height: 25px;
font-weight: normal;
/* includes border width */
padding: 5px 5px 5px 12px;
color: white;
opacity: 0.8;
}
.invisible {
visibility: hidden;
}
#unitsValue {
/* Support spaces */
white-space: pre;
}
<div class="wrapper">
<input id="input"type="number" value="12" />
<div class="units">
<span class="invisible" id="hiddenValue">12</span>
<span class="units-value" id="unitsValue"> km</span>
</div>
</div>
Since you are using bootstrap, you can use input-groups component and override some of the bootstrap styling :
HTML
<div class="input-group unity-input">
<input type="text" class="form-control" placeholder="Enter unity value" aria-describedby="basic-addon2" /> <span class="input-group-addon" id="basic-addon2">
lbs
</span>
</div>
CSS
.input-group {
top:40px;
width:auto;
}
.unity-input .form-control {
border-right:0!important;
}
.unity-input .input-group-addon {
background:white!important;
border-left:none!important;
font-weight:bold;
color:#333;
}
Fiddle
Here: (numbers are arbitrary and you can play around with those, what's important is to float the input and the negative margin on the span holding the measurement unit)
CSS:
#form>span {
display: inline-block;
padding-top: 5px;
margin-left: -16px;
}
#form>input {
padding: 5px 16px 5px 5px;
float:left;
}
HTML:
<div id="form">
<span class="units">lb</span>
<input type="text" placeholder="Value" />
</div>
JSFiddle DEMO
The problem I have found with all of the previous answers is that, if you change the length of the units (for example, "€/month" instead of "lb") the <span> element won't be correctly aligned.
I found a better answer in another post, and it's really simple:
Html
<div class="wrapper">
<input></input>
<span class="units">lb</span>
</div>
CSS
.wrapper{
position: relative;
}
.units {
position: absolute;
right: 14px (or the px that fit with your design);
}
This way, you can even put a long unit such as "€/month" and it will still be correctly positioned.
using bootstrap:
<label for="idinput">LABEL</label>
<div class="input-group mb-3">
<input class="form-control" name="idinput" type="text" pattern="(-?[0-9]+(\.[0-9]+)?)" [(ngModel)]="input"/>
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">m3/s</span>
</div>
</div>
The only thing you can try with strictly css and html is placeholder and text align left. with jquery you could you the .addClass command.
http://jsfiddle.net/JoshuaHurlburt/34nzt2d1/1/
input {
text-align:right;
}
I have the following html:
<div class="mydiv">
<p>some text here</p>
<input type='text' />
</div>
...with the following CSS:
.mydiv {
background-color:yellow;
}
.mydiv:focus, .mydiv:hover {
background-color:orange;
}
The :hover is changing the background color appropriately, but the :focus is not having any effect. Is this because the <div> cannot truly have focus?
Is there a CSS solution to make .mydiv change background color when any of its children receive focus?
Here's a fiddle.
There is no CSS solution for this. But, you can achieve this by using jQuery.
$(".mydiv").children().focus(function() {
$(this).parent().css("background-color", "orange");
}).blur(function() {
$(this).parent().css("background-color","yellow");
});
Here is the Fiddle
You have to add the tabindex attribute to the element needs to be focusable.
Here is the Fiddle
But, to answer your question, there is no pure CSS solution to make the div bg color change if its children receive focus.
When using jQuery, I think you're better off using the focusin and focusout events.
The code as adapted from the accepted answer would then become:
$(".mydiv").focusin(function() {
$(this).css("background-color", "orange");
}).focusout(function() {
$(this).css("background-color","yellow");
});
though, personally, I'd rather use a "focus" class:
$(".mydiv").focusin(function() {
$(this).addClass("focus");
}).focusout(function() {
$(this).removeClass("focus");
});
combined with the css for the combined selector:
.mydiv.focus { background-color: orange }
p.s. For once, I find the bit of docs on w3schools more informative than the demo on api.jquery.com, which just looks confusing to me.
Possible CSS solution:
<style>
#row1 {display: block; position: relative; width: 100%; background-color: #ffffff; z-index: 150;}
.BGmagic {display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #efefef; z-index: 200;}
#inputone{display: block; position: relative; z-index: 250;}
#inputone:focus + .BGmagic {display: block;}
#inputone:hover + .BGmagic {display: block;}
</style>
<form>
<div ID="row1">
<p style="position: relative; z-index: 250;">First name:</p>
<input ID="inputone" type="text" name="firstname">
<div class="BGmagic"></div>
</div>
</form>
Please answer the following questions:
How to merge search box and search button as shown in below example1 and example2? The box and button are joined together.
How to put 'magnifier' icon on the left side of the search box?
How to put a default text into the box like 'Search for items' and fade it when user clicks on the box.
Example1
Example2
Example3 (I don't want a separate button as shown below)
Please help! Thanks!!
Easiest way is to make the entire text field wrapper, from the icon on the left to the button on the right, one div, one image.
Then put a textfield inside that wrapper with a margin-left of like 30px;
Then put a div inside the wrapper positioned to the right and add a click listener to it.
HTML:
<div id="search_wrapper">
<input type="text" id="search_field" name="search" value="Search items..." />
<div id="search_button"></div>
</div>
CSS:
#search_wrapper{
background-image:url('/path/to/your/sprite.gif');
width:400px;
height:40px;
position:relative;
}
#search_field {
margin-left:40px;
background-transparent;
height:40px;
width:250px;
}
#search_button {
position:absolute;
top:0;
right:0;
width:80px;
height:40px;
}
JQuery:
$(function(){
// Click to submit search form
$('#search_button').click(function(){
//submit form here
});
// Fade out default text
$('#search_field').focus(function(){
if($(this).val() == 'Search items...')
{
$(this).animate({
opacity:0
},200,function(){
$(this).val('').css('opacity',1);
});
}
});
});
For your first question, there are many ways to accomplish the joining of the button to the search box.
The easiest is to simply float both elements to the left:
HTML:
<div class="wrapper">
<input placeholder="Search items..."/>
<button>Search</button>
</div>
CSS:
input,
button {
float: left;
}
Fiddle
This method has some limitations, however, such as if you want the search box to have a percentage-based width.
In those cases, we can overlay the button onto the search box using absolute positioning.
.wrapper {
position: relative;
width: 75%;
}
input {
float: left;
box-sizing: border-box;
padding-right: 80px;
width: 100%;
}
button {
position: absolute;
top: 0;
right: 0;
width: 80px;
}
Fiddle
The limitation here is that the button has to be a specific width.
Probably the best solution is to use the new flexbox model. But you may have some browser support issues.
.wrapper {
display: flex;
width: 75%;
}
input {
flex-grow: 2;
}
Fiddle
For your second question (adding the magnifier icon), I would just add it as a background image on the search box.
input {
padding-left: 30px;
background: url(magnifier.png) 5px 50% no-repeat;
}
You could also play around with icon fonts and ::before pseudo-content, but you'll likely have to deal with browser inconsistencies.
For your third question (adding placeholder text), just use the placeholder attribute. If you need to support older browsers, you'll need to use a JavaScript polyfill for it.
It's all in the CSS... You want something like this:
http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box
Also, for the search icon:
http://zenverse.net/create-a-fancy-search-box-using-css/
Src: Quick Google.
You don't merge them, rather you give the illusion that you have. This is just CSS. Kill the search box borders, throw it all into a span with a white background and then put the fancy little dot barrier between the two things. Then toss in some border radius and you are in business.
The above tut might look too lengthy. The basic idea is this:
Arrange the input box just like you do. The input text box should be followed by the button. add the following css to do that.
position:relative;
top:-{height of your text box}px;
or you can use absolute positioning.
<div id="search_wrapper">
<input type="text" id="search_field" name="search" placeholder="Search items..." />
<div id="search_button">search</div>
</div>
#search_wrapper{
background-color:white;
position:relative;
border: 1px solid black;
width:400px;
}
#search_field {
background-transparent;
border-style: none;
width: 350px;
}
#search_button {
position:absolute;
display: inline;
border: 1px solid black;
text-align: center;
top:0;
right:0;
width:50px;
}
http://jsfiddle.net/zxcrmyyt/
This is pretty much easy if You use bootstrap with custom css
My output is diffrent but the logic works as it is..
I have used Bootstrap 5 here you can also achieve this by using Pure CSS,
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-10 p-0 inputField text-center">
<input type="text" id="cityName"placeholder="Enter your City name..">
<input type="submit" value="search" id="submitBtn">
</div>
</div>
</div>
For Styling
#import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
* {
font-family: 'Ubuntu', sans-serif;
}
.inputField {
position: relative;
width: 80%;
}
#cityName {
width: 100%;
background: #212529;
padding: 15px 20px;
color: white;
border-radius: 25px;
outline: none;
border: none;
}
#submitBtn {
position: absolute;
right: 6px;
top: 5px;
padding: 10px 20px;
background: rgb(0, 162, 255);
color: white;
border-radius: 40px;
border: none;
}
Hear is an Example !
https://i.stack.imgur.com/ieBEF.jpg
I'm trying to create the following:
Using two images: one as mask (the diagonal lines) and the other the image and text themselves (the mask and image+text are the same size):
..and I just can't get it done!
I've tried all combinations with divs and z-indeces, opacity and background-image.. (should mention I'm noob to html).
Here's one shot I got at it (with only the mask and an image):
div {
position: absolute;
top: 775px;
left: 0px;
height: 188px;
width: 272px;
background-image: url('grey-out.png');
}
img {
z-index: 1000;
}
<div></div>
<img src="41_large.png" />
Which just gives the diagonal lines themselves..
Can someone please help me out?
How do I make that "disabled" look combining the (semi-transparent) mask and the div?
Thanks!
This approach works:
<div id="pspThing" class="disabled">
<img class="disabled" src="http://i.stack.imgur.com/lCTVr.png" />
</div>
#pspThing {
background: transparent url(http://i.stack.imgur.com/WpgNy.jpg) 0 0 no-repeat;
height: 93px;
width: 273px;
border: 1px solid #000;
margin: 0 auto;
overflow: hidden;
}
#pspThing img {
display: none;
opacity: 0.5;
}
#pspThing img.disabled {
display: block;
}
JS Fiddle demo
Bearing in mind that there's no transparency in your striped png (so far as the imgur hosted image is concerned, anyway, so I'm using opacity instead). Also the JS Fiddle demo's a little more complicated than necessary, so's I could show the disabled/enabled states.
Pleass consider this simple snippet. Very universal solution. Acts and feels very much like the 'disable' attribute of input elements. See the snippet
function disable(elementId, enabling) {
el = document.getElementById(elementId);
if (enabling) {
el.classList.remove("masked");
} else
{
el.classList.add("masked");
}
}
.masked {
position: relative;
pointer-events: none;
display: inline-block;
//visibility:hidden; /* Uncomment this for complete disabling */
}
.masked::before {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
visibility: visible;
opacity: 0.5;
background-color: black;
//background: url('http://i.imgur.com/lCTVr.png'); /* Uncomment this to use the image */
content: "";
}
<button onclick="alert('Now, click \'OK\' then \'Tab\' key to focus next button.\nThen click \'Enter\' to activate it.');">Test</button>
<div id="div1" style="display:inline-block" class="masked">
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<br/>
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<img src="http://i.stack.imgur.com/WpgNy.jpg">
</div>
<button>Dummy</button>
<br/>
<button id="enableBtn" onclick="disable('div1',true);disable('enableBtn',false);disable('disableBtn',true);">Enable</button>
<button id="disableBtn" onclick="disable('div1',false);disable('enableBtn',true);disable('disableBtn',false);" class="masked">Disable</button>
I built an example here.
I doubt that the position:absolute approach is the best way to handle this since you need to know the size of the image.
For doing it by z-index your both images should be in the container with img tag.