Styling a browser generated shadow-root DOM - javascript

I want to style the input in #shadow-root but it seems it's not possible and I understand that it might not be recommended practice. Nevertheless I have design I need to follow if possible and searching for solutions are either deprecated or using javascript to add :parts, what maybe is for your own generated #shadow-root html and not by browser? Perhaps there is a reasonable way that I'm not seeing?
Adding this:
<input type="file" name="resume">
Outputs this in chrome:
<input type="file" name="resume">
#shadow-root (user-agent)
<input type="button" value="Choose file" pseudo="-webkit-file-upload-button" id="file-upload-button">
#shadow-root (user-agent)
"Choose file"
</input>
<span aria-hidden="true">No file</span>
</input>

Related

Selenium with Python -- finding element without proper identifiers

I am using selenium with python to write the code. I am looking to pull the information from a text box. The box auto fills as other information is being filled out. Inspecting the box gives the following code:
<input type="tel" autocomplete="off" name="amount" step="any" class="form-
control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"
placeholder="" tw-focusable="" show-decimals="$ctrl.showDecimals" tw-number-
input-formatter="" ng-change="$ctrl.changedAmount()" ng-
model="$ctrl.ngModel" ng-disabled="$ctrl.ngDisabled" disabled="disabled"
style="">
The issue is that there is already another input box that has the name "amount", so I can't do a simple selection by name. I am thinking this would require me to use a CSS selector but everything I have tried so far has not worked. Please let me know what I can try.
Looks like you need to use CSS or XPath locators.
Its hard to tell how exactly you can find that element since you haven't provided a source of the entire page but here are some tips.
In the worst case when you cant find any combination of attributes that will uniquely identify the element you need to rely on dom nodes hierarchy, i.e. in order to find first input on the following page:
<!DOCTYPE html>
<html>
<head>
<title>Dummy page</title>
</head>
<body>
<div>
<div>
<input type="text">
</div>
<p>
<input type="text">
</p>
<input type="text">
</div>
</body>
</html>
You can use XPath locator that might look similar to this one:
//div/div/input
But that's the worst case, usually you can use more flexible locators based on element attributes that less likely to be affected by page structure modifications. Let's say each of our inputs from the page above has "name" and "disabled" attributes.
<div>
<div>
<input name="input1" disabled="" type="text">
</div>
<p>
<input name="input1" disabled="disabled" type="text">
</p>
<input name="input2" disabled="" type="text">
</div>
Then we can find first input using the following locator:
//input[#name="input1" and #disabled=""]
Hope that helps.

Is it possible to invoke a custom validation popup on a text box with Javascript?

In Firefox when a text control has the attribute "required" a popup appears when the user does not enter any text:
<input id="foo" type="text" name="foo" required>
Is it possible with Javascript to invoke the same such popup but with a custom message? Something like:
document.getElementById("foo").?message = "Custom message goes here!";
document.getElementById("foo").?invoke();
There are many possible ways to do this and almost coutless validation libraries. The absolute simplest and still relying on html5 is utilizing oninvalid and setCustomValidity.
Support is pretty much 100% at this point - http://caniuse.com/#feat=form-validation
<form>
<input id="foo" type="text" name="foo" required oninvalid="this.setCustomValidity('Custom message goes here!')"/>
<input type="submit"/>
</form>

How can I upload a new file on click of image button

I have got a task to upload new file from the click of image button.
My code is
<label>File</lable>
<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
On the click of this button I want to upload a new file.How can I do this?
You can check my code from
Demo
You could add a hidden file input field, like:
<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
<input type="file" id="my_file" style="display: none;" />
And do:
$("input[type='image']").click(function() {
$("input[id='my_file']").click();
});
Demo:: Updated Fiddle
There is no need for javascript just put the <input> and the <img> inside <label> make sure you hide the <input> like so:
<label for="image">
<input type="file" name="image" id="image" style="display:none;"/>
<img src="IMAGE URL"/>
</label>
There is no need for javascript.
Just place both <input type="file"> and <img src=""> inside a label.
Eg:
<label>
<input type="file" style="display:none">
<img src="">
</label>
This will work Just Fine
Demo: https://codepen.io/sandeeprana1001/pen/dyPVvJZ
If you are looking for a cross-browser compatible solution you should check out plupload(http://www.plupload.com) it supports image buttons aswell from what i remember.
you are using the wrong input, use file instead, if you want the button to loke like the circle in your code demo you will need to use CSS to change the way "submit" looks like. This has to be in a form:
<form action="upload_file.php" method="post" enctype="multipart/form-data">
<input type="file" name="myfile"/>
<input type="submit" class="circle-btn"/>
<form>
I don't know what language are you using in the server-side (PHP, ASP.NET, etc) but you will need to create a page (for xample "upload_file.php" for php). You can easily find examples in google about how to create a page like that, just copy pasete the code:
An example in PHP: http://www.w3schools.com/php/php_file_upload.asp
Hope it helps :)
You can do this using css.
Please check the 4th answer in this blog.
How can I customize the browse button?
You can use your image as background image of the .button class.
You can also use this in order to access the file that you uploaded since in PHP you can't access the file inside a label.
<input type="file" name="input" id="input" style="display:none;">
<label for="input">
<img src="images/default.jpg" id="image">
</label>
Supplement for DemoUser's answer, add .focus() works for me.
$("input[type='image']").click(function() {
$("input[id='my_file']").focus().click();
});

External javascript file giving problems

I am new to javascript and working on a small form validation project...I have used external javascript file for this purpose but it is giving me problems.I have included this file properly in my html form but it is not updating any div or changing any color however this file is showing popup alerts.....Another thing is that when I copy and paste the same code directly into my html tags then it works fine......I dont know why this is happening ????
The html tags I have used are actually SPRING HTML tags...Are these tage creating problem????
<label for="edit-mail"> First Name<span class="form-required" title="This field is required.">*</span></label>
<form:input path="firstName" id="firstName" />
<div id="firstNameError"</div>
<form:errors path="firstName"/>
<div id='user-register_FirstName_errorloc' class="error_strings"></div>
Make sure that you're returning false to prevent the default behavior of your button (which is to submit the form:
<input type="submit" name="op" id="edit-submit" value="Next" class="form-submit" onClick="validateForm();return false;">
See the difference here: http://jsfiddle.net/atc3B/

HTML upload file small manipulation

When I use this code on IE8, the file is sent through the HTTP request fine:
<form action="http:localhost:8080/myApp"
enctype="multipart/form-data" method="post">
<p>
Type some text (if you like):<br>
<input type="text" name="textline" size="30">
</p>
<p>
Please specify a file<br>
<input type="file" name="datafile" size="40">
</p>
<div>
<input type="submit" value="Send">
</div>
</form>
but when I add another intermediate button, 'Add file', as you can see below instead of pressing the 'browse' button itself, the file isn't sent to the server side, why??
<form action="http:localhost:8080/myApp"
enctype="multipart/form-data" method="post">
<p>
Type some text (if you like):<br>
<input type="text" name="textline" size="30">
</p>
<p>
Please specify a file<br>
<input id="fileChooser" type="file" name="datafile" size="40">
</p>
<button onclick="document.getElementById('fileChooser').click()">Add File</button>
<div>
<input type="submit" value="Send">
</div>
</form>
Change the event handler:
<button onclick="document.getElementById('fileChooser').click(); return false">Add File</button>
Your button was acting as a "select" element. You could also make it work by explicitly setting the button type, I think:
<button onclick="document.getElementById('fileChooser').click()" type='button'>Add File</button>
Now, this works in Chrome, maybe Safari, and you say now that it works in IE8 as far as getting the file chooser up. It won't work in Firefox, however, because Firefox appears to be more strict about what you can do to file inputs.
Have the real input of type file hidden by setting its opacity to 0 then put the fake button on top of it, with smaller z-index value. This way when clicking the fake button, user will actually click the real button underneath and you will achieve the visual effect you desire.
OK read some articles. Apparently that's just impossible.
I hope that HTML5 and IE9 will improve the customization of the annoying upload button, in many aspects.

Categories