I want to make a placeholder stay visible after writing something in the input field.
Important:
I don't want to use any other elements to 'workaround' this problem, I want to use just the input field. Please just CSS, no JS or jQuery.
Use data-placeholder property on class ="placeholder" so :
<div class="placeholder" data-placeholder="New placeholder">
</div>
and in Css :
.placeholder {
position: relative;
}
.placeholder::after {
position: absolute;
left: 10px;
top: 2px;
content: attr(data-placeholder);
pointer-events: none;
opacity: 0.5;
}
Here is the JSfiddle
Related
I have several inputs on the same row of a table. some of them eventually are "small" (or short).
Particularly the INPUT DATE field value is very difficult to see because the allowed is shorter than the "10 characters + the calendar icon".
So, I would like to do a onMouseOver display the current value of the field. After user changes, it shows the newest value user selected.
How can I do that?
Save the date into javascript variable as datetime format.
If you are using hardcode HTML and CSS you can use tooltip.
Refer here :https://www.w3schools.com/css/css_tooltip.asp
If you are using frameworks such as Angular. Just use MatTooltip
Try to use it.
<input type="text" id="userType" title="title show while hovering the field" />
You can add events to the input by using JavaSCript. In this solution, I used two events: mouseover and mouseout to display/hide a tooltip.
So basically the input value is hidden until the mouseover event is trigged.
The CSS styles are available on W3School
const input = document.getElementById("input")
const output = document.getElementById("output")
input.addEventListener("mouseover", () => {
output.innerHTML = input.value
output.classList.add("active")
})
input.addEventListener("mouseout", () => {
output.classList.remove("active")
})
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
min-height: 10px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip .tooltiptext.active {
visibility: visible;
opacity: 1;
}
<h1>Your inputs below</h1>
<div class="tooltip">
<input id="input" type="date"></input>
<span class="tooltiptext" id="output"></span>
</div>
I'm trying to create hover messages for each field that the user needs to fill out. The first hover message is centered how I want it, but when i try to create the same effect for the next field, the hover message is displayed in the wrong position. I'm not sure what I need to change in the CSS to get the same effect for all messages.
I've tried changing the position, but it didn't help, not sure what else is relevant to this issue.
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 8px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -35px;
left: -295%;
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<div className="tooltip" style={{ "fontSize": "12px", "fontWeight": "bold" }}> Hello
<span className="tooltiptext"> <p>{this.state.page_options.hoverMessages.hello}</p> </span>
</div>
Since you haven't shared your HTML code and its CSS, I'd assume the wrong display of tooltip is happening because of position: absolute in your tooltip's CSS.
It seems that the main problem is the left: -295% property. I'm not sure why you were doing it as a percentage, but if you use a negative pixel value (since you have a hardcoded pixel width), it should work.
Note: <span> is an inline element, so it cannot contain block-level elements like <p>.
Try my sample on codepen.
I'm not sure what tool you are using, but I converted the placeholders into real HTML attributes and CSS. I also commented out the inline-block property of the tooltip class, but it works either way.
Note: I used a calc function for the left property, just to show its relationship to the hardcoded width of 200px.
Based on Brian's suggestion, I changed the left: -295% to a pixel value instead. I also made each field have specific top attributes as such:
<div className="tooltip" style={{ "fontSize": "12px", "fontWeight": "bold" }}> HELLO?
<div className="tooltiptext" style={{ "top": "-102px" }}>
<p>{this.state.page.hello}</p>
</div>
</div>
I have a project where sometimes checkboxes don't have labels. The only way of setting custom image for checkbox I've found was setting image for label:before for corresponding label which has for value with id of checkbox.
Are there any CSS way (at least hacky) to set custom image to checkbox without changing markup? input[type="checkbox"]:before works only in Chrome.
The only way I've found that works everywhere except IE is via setting CSS appearance:
input[type="checkbox"] {
width: 16px;
height: 16px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: red;
}
input[type="checkbox"]:checked {
background-color: green;
}
<input type="checkbox" />
I think it's impossible to do it without label for all browsers. In my opinion label is necessarily.
But you can use JS for this and one of library like icheck (and many other not only jQuery also pure JS)
Maybe if you add a container to your checkbox like this
<div>
<input type="checkbox">
</div>
and then
div{
position: relative;
/* Your custom style */
}
input{
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 0;
}
I'm trying to create a custom component using only CSS and HTML.
The behavior of the component will be like: when the input is selected (has focus) another container is open.
The problem is when the container is opened the input lose focus and the container is closed on first click :(
So How can I have that input focus focused when I'm on the opened container focused ?
<div class="block">
<label>Field</label>
<input type="text" tabindex="-1"/>
<div tabindex="-1" class="infront">
Keep this bastard open.<br/>
<br/>
while clicking on this div
</div>
</div>
CSS
.block{
position: relative;
display: inline-block;
margin: 50px;
}
.infront{display: none;}
.block input[type="text"]:focus ~ .infront {
display: block;
position: absolute;
top:100%;
width: 80%;
right: 0;
background: #ccc;
opacity:0.8;
}
Fiddle:
You need to take care of the state of .infront container states as well.
Update your CSS to this
.block input[type="text"]:focus ~ .infront
, .infront:hover
, .infront:active
, .infront:focus {
display: block;
position: absolute;
top:100%;
width: 80%;
right: 0;
background: #ccc;
opacity:0.8;
}
I think you can not do it only with HTML and CSS. You will need some jquery code like this:
$(.block input[type=text]).on('focus', function(e) {
$('.infront').show();
});
Is there a way to hide the browse button and only leave the text box that works in all browsers?
I have tried setting the margins but they show up different in each browser
No, what you can do is a (ugly) workaround, but largely used
Create a normal input and a image
Create file input with opacity 0
When the user click on the image, you simulate a click on the file input
When file input change, you pass it's value to the normal input (so user can see the path)
Here you can see a full explanation, along with code:
http://www.quirksmode.org/dom/inputfile.html
You may just without making the element hidden, simply make it transparent by making its opacity to 0.
Making the input file hidden will make it STOP working. So DON'T DO THAT..
Here you can find an example for a transparent Browse operation;
.dropZoneOverlay, .FileUpload {
width: 283px;
height: 71px;
}
.dropZoneOverlay {
border: dotted 1px;
font-family: cursive;
color: #7066fb;
position: absolute;
top: 0px;
text-align: center;
}
.FileUpload {
opacity: 0;
position: relative;
z-index: 1;
}
<div class="dropZoneContainer">
<input type="file" id="drop_zone" class="FileUpload" accept=".jpg,.png,.gif" onchange="handleFileSelect(this) " />
<div class="dropZoneOverlay">Drag and drop your image <br />or<br />Click to add</div>
</div>
I find a good way of achieving this at Remove browse button from input=file.
The rationale behind this solution is that it creates a transparent input=file control and creates an layer visible to the user below the file control. The z-index of the input=file will be higher than the layer.
With this, it appears that the layer is the file control itself. But actually when you clicks on it, the input=file is the one clicked and the dialog for choosing file will appear.
Below code is very useful to hide default browse button and use custom instead:
(function($) {
$('input[type="file"]').bind('change', function() {
$("#img_text").html($('input[type="file"]').val());
});
})(jQuery)
.file-input-wrapper {
height: 30px;
margin: 2px;
overflow: hidden;
position: relative;
width: 118px;
background-color: #fff;
cursor: pointer;
}
.file-input-wrapper>input[type="file"] {
font-size: 40px;
position: absolute;
top: 0;
right: 0;
opacity: 0;
cursor: pointer;
}
.file-input-wrapper>.btn-file-input {
background-color: #494949;
border-radius: 4px;
color: #fff;
display: inline-block;
height: 34px;
margin: 0 0 0 -1px;
padding-left: 0;
width: 121px;
cursor: pointer;
}
.file-input-wrapper:hover>.btn-file-input {
//background-color: #494949;
}
#img_text {
float: right;
margin-right: -80px;
margin-top: -14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="file-input-wrapper">
<button class="btn-file-input">SELECT FILES</button>
<input type="file" name="image" id="image" value="" />
</div>
<span id="img_text"></span>
</body>
Came across this question and didn't feel like any of the answers were clean. Here is my solution:
<label>
<span>Select file</span>
<input type="file" style="display: none">
</label>
When you click the label the select file dialog will open. No js needed to make it happen.
You can style the label to look like a button.
Here is an example using w3css and font awesome:
<label class="w3-button w3-blue w3-round">
<span><i class="fas fa-image"></i></span>
<input type="file" style="display: none" >
</label>
Of course you need to add an event listener to the input to detect a file was chosen.
HTML - InputFile component can be hide by writing some css.
Here I am adding an icon which overrides inputfile component.
<label class="custom-file-upload">
<InputFile OnChange="HandleFileSelected" />
<i class="fa fa-cloud-upload"></i> Upload
</label>
css-
<style>
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
</style>
So I found this solution that is very easy to implement and gives a very clean GUI
put this in your HTML
<label class="att-each"><input type="file"></label>
and this in your CSS
label.att-each {
width: 68px;
height: 68px;
background: url("add-file.png") no-repeat;
text-indent: -9999px;
}
add-file.png can be any graphic you wish to show on the webpage. Clicking the graphic will launch the default file explorer.
Working Example: http://www.projectnaija.com/file-picker17.html
Just an additional hint for avoiding too much JavaScript here: if you add a label and style it like the "browse button" you want to have, you could place it over the real browse button provided by the browser or hide the button somehow differently. By clicking the label the browser behavior is to open the dialog to browse for the file (don't forget to add the "for" attribute on the label with value of the id of the file input field to make this happen). That way you can customize the button in almost any way you want.
In some cases, it might be necessary to add a second input field or text element to display the value of the file input and hide the input completely as described in other answers. Still the label would avoid to simulate the click on the text input button by JavaScript.
BTW a similar hack can be used for customizing checkboxes or radiobuttons. by adding a label for them, clicking the label causes to select the checkbox/radiobutton. The native checkbox/radiobutton then can be hidden somewere and be replaced by a custom element.
Just add negative text intent as so:
input[type=file] {
text-indent: -120px;
}
before:
after:
Oddly enough, this works for me (when I place inside a button tag).
.button {
position: relative;
input[type=file] {
color: transparent;
background-color: transparent;
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
z-index: 100;
}
}
Only tested in Chrome (macOS Sierra).
the best way for it
<input type="file" id="file">
<label for="file" class="file-trigger">Click Me</label>
And you can style your "label" element
#file {
display: none;
}
.file-trigger {
/* your style */
}
As of 2022, modern browsers support file button pseudo selector. I was only struggling with Safari v16.1 which didn't work as expected and had to workaround button hiding (::-webkit-file-upload-button part).
input[type=file]::file-selector-button {
display: none;
}
input[type=file]::-webkit-file-upload-button {
display: block;
width: 0;
height: 0;
margin-left: -100%;
}
input[type=file]::-ms-browse {
display: none;
}
You may also use concise syntax:
::file-selector-button {
/* ... */
}
::-webkit-file-upload-button {
/* ... */
}
::-ms-browse {
/* ... */
}