Develop Reference

Want a Button But Have to Use Input Where Type=File?

I have an Import button that I want to look like this:
The HTML for that looks like this:
<button on-read-file="importTasks(contents)" class="btn btn-default" ng-click="importTasks();">Import</button>
However, because I want the button to open a file, my research shows I need to use an input control and it looks like this:
Here is the HTML for it:
<input type="file" on-read-file="importTasks(contents)" class="btn btn-default" ng-click="importTasks();"></input>
I don't need the input box, and I don't need a button to say browse. I want the functionality of the second option, with the look of the first. Is that possible?

Hide the input and use a label whose "for" attribute matches the input's ID. Then simply style the label however you want.
<input type="file" id="abc" hidden>
<label for="abc">Import</label>
Edit
For completeness, here's the actual code that was used. Because the button was wrapped in a label, no extra styling was necessary.
<input id="hiddenImport" style="display:none" type="file" on-read-file="importTasks(contents)" ng-click="importTasks();"/>
<label for="hiddenImport"><button class="btn btn-default" ng-disabled="loading">Import</button></label>

Yes but you will need to use javascript. Make the file input hidden and then make the button click activate it like so
<input id="files" type="file" style="display:none"/>
<button id="upload" type="button"> </button>
<script>
$('#upload').click(function() {
$('#files').click();
});
</script>

You will have to use CSS to make the input box transparent and add a button-like design over it like this:
HTML:
<div class="fileInput">
<input type="file" on-read-file="importTasks(contents)" class="btn btn-default" ng-click="importTasks();"/>
</div>
CSS:
.fileInput {
margin: 20px;
width: 80px;
height: 20px;
background-color: #FFF;
border: #CCC 2px solid;
overflow: hidden;
text-align:center;
}
.fileInput input {
display: block !important;
width: 80px !important;
height: 20px !important;
opacity: 0 !important;
overflow: hidden !important;
}
Link to jsFiddle: https://jsfiddle.net/AndrewL32/h40juz64/
NOTE: If you want the "INPUT" text over the button, you can either add it on a separate div and then use css positioning to move it over the Input box (which can get a bit tricky) OR you can just make an image with the "INPUT" text on it and then use it as a background-image for the button.

CSS: Change parent on focus of child

Let's say you have something like:
<div class="parent">
<input class="childInput" type="text" />
<div class="sibling"></div>
</div>
I want to change the appearance of the parent/siblings when the child receives focus. Are there any CSS tricks for doing stuff like this?
Edit:
The reason for my question is as follows:
I'm creating an Angular app which needs editable text fields. It should look like a label until it is clicked, at which point it should look like a normal text input. I styled the text field based on :focus to achieve this effect, but the text is cut off by text input's boundaries. I also used ng-show, ng-hide, ng-blur, ng-keypress and ng-click to switch between the label and the text input based on blurs, key presses and clicks. This worked fine except for one thing: After the label's ng-click="setEdit(this, $event)" changes the edit boolean used by ng-show and ng-hide to true, it uses a jQuery call to .select() the text input. However, it isn't until after the completion of the ng-click that everything is $digest'd, so the text input loses focus again. Since the text input never actually receives focus, using ng-blur to revert back to showing the label is buggy: The user has to click in the text input and then click out of it again to revert back to showing the label.
Edit:
Here's an example plunk of the issue: http://plnkr.co/edit/synSIP?p=preview

You can now do this in pure CSS, so no JavaScript needed 😁
The new CSS pseudo-class :focus-within would help for cases like this and will help with accessibility when people use tabbing for navigating, common when using screen readers.
.parent:focus-within {
border: 1px solid #000;
}
The :focus-within pseudo-class matches elements that either themselves
match :focus or that have descendants which match :focus.
Can I use...
You can check which browsers support this by visiting http://caniuse.com/#search=focus-within
Demo
fieldset {
padding: 0 24px 24px !important;
}
fieldset legend {
opacity: 0;
padding: 0 8px;
width: auto;
}
fieldset:focus-within {
border: 1px solid #000;
}
fieldset:focus-within legend {
opacity: 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form>
<fieldset>
<legend>Parent Element</legend>
<div class="form-group">
<label for="name">Name:</label>
<input class="form-control" id="name" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</fieldset>
</form>
</div>

There is no chance how to do that with CSS. CSS can style only siblings, children, etc. not parents.
You can use simply JS like this:
<style>
.parent {background: green}
.focused {background: red;}
</style>
<div class="parent">
<input class="childInput" type="text" />
<div class="sibling"></div>
</div>
<script>
$('.parent > *')
.focus(function() {
$('.parent').addClass('focused');
})
.blur(function() {
$('.parent').removeClass('focused');
});
</script>
http://jsfiddle.net/C4bZ6/
This code takes all direct children of .parent and if you focus one of them, class focused is added to parent. On blur, this class is removed.

You can use pure CSS to make the text input look like it's not a text input unless it is in focus
http://jsfiddle.net/michaelburtonray/C4bZ6/13/
input[type="text"] {
border-color: transparent;
transition-duration: 600ms;
cursor: pointer;
outline-style: none;
text-overflow: ellipsis;
}
input[type="text"]:focus {
border-color: initial;
cursor: auto;
transition-duration: 300ms;
}

Try the contenteditible attribute. This may require more work to turn it into usable form data however.
http://jsfiddle.net/michaelburtonray/C4bZ6/20/
<span class="parent" contenteditable>Click me</span>

You can style it even for focus-within and not(focus-within) like this (without using JavaScript => more accessible and faster):
.myform:not(:focus-within) button[type="submit"] {
display: none;
}
.myform:focus-within button[type="submit"] {
display: block;
}

change the image background of a button when it's clicked

I put an input button, and set its background with an image, now Ii want to change that image when the button is clicked.
Here is my relevant code:
<div id='back'>
<input type="button"/>
</div>
CSS code:
#back input{
width: 130px;
height: 130px;
background: url(img/back_default.png);
border: hidden;
}
Can it be done in CSS (as with links-<a> tags), or should I rely to JavaScript instead? Thanks.

Javascript is not needed:
#back input {
width: 130px;
height: 130px;
background: url(img/back_default.png);
border: hidden;
}
#back input:active {
background-image: url(img/back_default-active.png);
}

This should work with JavaScript:
function change() {
document.
getElementById("back").
getElementsByTagName("input").
style.backgroundImage = "url(img/anotherImage.png)"
}
Call it from your button click (or from anywhere you want):
<div id='back'>
<input type="button" onclick="change()"/>
</div>

It's as Matt Said you could use CSS's active pseudo class to change the background or alternatively you could use javascript to add an eventHandler (onClick Listner )to the button that changes the image.
HTML
<div id='back'>
<input type="button" id="xyz" value="Go to back" class="button"/>
</div>
JS
<script>
el = document.getElementById('xyz');
el.addEvenListener("click",changeImg,false);
function changeImg()
{
el = document.getElementById('xyz');
el.style.backround="url('img/back_default-active.png')";
}
</script>

How to remove "no file selected" from type=file inputs?

I can't seem to figure out any way to remove the "No file selected" text that shows up next to inputs of type "file".
Do you guys know any way how to remove this text?

input[type='file'] {
color: transparent;
}
Enjoy

There is no cross-browser way to do this. The "no file selected" text is in the implementation-defined part of the widget, and I don't believe that most browsers offer much in the way of browser-specific customization. On the other hand, you could simply use CSS to cover the text with something when the value attribute is empty.

You can do this by defining a width to the input and hiding the exceeding content (the undesired "No file selected" text).
input {
width: 132px;
overflow:hidden;
}
Here is the demonstration on jsfiddle.
Beware: each language has its own default text and it may render different input sizes. In brazilian portuguese that 132px width is fine!
My answer was based on this similar question on stackoverflow.

You can replace the file field with a button with the answer to this question: file upload button without input field?

CSS
<style>
#image_file{
position: relative;
width: 188px;
border: 1px solid #BBB;
margin: 1px;
cursor: pointer;
float: left;
}
</style>
HTML
<input id="image_file" onclick="getFile()" onfocus="this.blur()" value=""/>
<div style='height: 0px;width: 0px; overflow:hidden;'>
<input type="file" id="PinSpot_file">
</div>
<input type="button" onclick="getFile()" style="background-color: #DDD;" value="Browser" >
JAVASCRIPT
function getFile(){
document.getElementById("PinSpot_file").click();
}
// Event when change fields
$('#PinSpot_file').live('change', function(e) {
var file = this.value;
var fileName = file.split("\\");
document.getElementById("image_file").value = fileName[fileName.length-1];
//AJAX
}

This is a really good hack and its a lot cleaner.
HTML
<div id="file_info' style='display:inline;'>Browse</div>
<input type="file" name='file[]' multiple style='opacity: 0;' onchange='displayFileName()'/>
JS
function displayFileName() {
var files = $('input[type="file"]')[0].files;
document.getElementById('file_info').innerHTML = files.length + " images to upload";`
}

Well, since there is no way to completely disable the text, I'd suggest either placing an element over the text or try the following solution..
CSS
input[type="file"] {
width: 90px; /* Keep it under 100px in order to hide the unwanted text. */
}
and add an html inline-title attribute to the element to hide the "No File Chosen" hover text.
HTML
<input type="file" id="FileId" title="">
or, you could do it all with JavaScript.
JS
document.addEventListener('DOMContentLoad', myFunction);
function myFunction() {
const FilePicker = document.getElementById('FileId');
FilePicker.style.width = "90px";
FilePicker.title = ""; // Leave This Empty
}

You can try this. Its work for me firefox browser
<style type="">
input[type='file'] {
color: transparent;
}
</style>

Adding value to a input using function

I don't know what is getting wrong in my created function. I was trying to create a beautiful country selector. But it looks like this selector is gonna select nothing. Just joking, so my problem is according to my thinking my function should change the value of a input field classed as country_input on clicking multiple series of links. But it looks like it is not gonna work. But you guys can tell me how to achieve my goal.
-:::- HTML CODE -:::-
<input type="text" class="country_input" />
<br><br>
<a href="#country-select" id="Change-1" onclick="change_country();" >Country-1</a>
<a href="#country-select" id="Change-2" onclick="change_country();" >Country-2</a>
<a href="#country-select" id="Change-3" onclick="change_country();" >Country-3</a>
<a href="#country-select" id="Change-4" onclick="change_country();" >Country-4</a>
<a href="#country-select" id="Change-5" onclick="change_country();" >Country-5</a>
And so on....
-:::- jQuery CODE -:::-
jQuery.fn.change_country = function () {
var country_name = $(this).innerHTML;
$('input.country_input').val(country_name);
};
-:::- CSS CODE -:::-
body a { text-decoration: none; display: block; width: 50%; color: #555; background: rgb(240, 240, 240); border: 2px solid #000; border-style: none none solid none; font-family: calibri,segoe ui,arial, sans-serif; font-size: 12px; padding: 3px 5px; }
body a:hover { color: #000; background: #fff; }
body input { font-family: calibri,segoe ui,arial, sans-serif; font-size: 12px; padding: 3px 3px; width: 50%; outline: none; }
So can anyone help me out with this. As I'm a new comer in creating jQuery based functions so please help me out.
Am I doing wrong function defining?
Am I missing something?
Is my code is totally failure?
LIVE DEMO
THANKS IN ADVANCE!

This works:
<script type="text/javascript">
$(document).ready(function(){
$('.countryLink').click(function(){
var innerText = $(this).text();
$('.country_input').val(innerText);
});
});
</script>
And HTML:
<input name="Text1" type="text" class="country_input"/>
<br/>
Country-1
Country-2
Country-3
See working example at jsfiddle.
Edit: I guess that you might want to use dropdown in scenario like this (too many options). Then you can do it like this:
$(document).ready(function(){
$('.countryDropDown').change(function(){
var innerText = $(this).children(':selected').text();
$('.country_input').val(innerText);
});
});
With HTML:
<input name="Text1" type="text" class="country_input"/>
<br/>
<select name="Select1" class="countryDropDown">
<option value="c1">Country-1</option>
<option value="c2">Country-2</option>
<option value="c3">Country-3</option>
</select>

Looks to me that the problem is you're adding the change_country function into jQuery, but when you're calling it, you're calling it like it was a normal global function.
It should work like you have it now if you change the first JS line to this:
var change_country = function() {
This would make it a global function, and then the call to it should work.
On a secondary note, all your a elements have the same ID - This is incorrect, as an element's ID should be unique.

You could try this:
<input type="text" class="country_input" />
<br>
<div class="country-select">Country-1</div>
<div class="country-select">Country-2</div>
<div class="country-select">Country-3</div>
<div class="country-select">Country-4</div>
<script type="text/javascript">
$(function(){
$(".country-select").click(function(){
$('input.country_input').val($(this).innerHTML);
});
});
</script>

I think youre confused about how you want to implement this. Youve defined your function in the jQuery.fn namespace which is where you typcially would put a jQuery plugin that works on a set of DOM elements. But then you try and call that function directly with an onclick atribute on the element pointing to change_country which doesnt exist. If you were to call the function in this way it would actually be:
onclick="jQuery.fn.change_country()"
But i dont think thats what you really want to do. Heres how i would do it: http://jsfiddle.net/nWrAt/8/... more or less.