I am styling a form with an input field. The input field is required to be completely transparent. The input field itself is no problem but once I start typing, the browser opens up the dropdown with the saved form data, displaying the words I previously entered in input fields. The dropdown itself is not transparent but is white. When I hover over one of the saved words it appears in the input field and when it does, the input field is also given the white background.
I tried setting the background for the active, focus and hover state to transparent but that doesn't seem to do the trick. I am also not able to see the saved form data dropdown in the element inspector so I don't know how to target it.
HTML:
<form class="" action="" method="_GET" accept-charset="utf-8" role="]">
<div class="form-group">
<label class="sr-only" for="q">Search Input Field</label>
<input class="form-control" type="text" name="q" value="" placeholder="SEARCH">
</div>
<button type="submit" class="btn btn-default btn-red">SEARCH</button>
</form>
Here's a fiddle:
http://jsfiddle.net/dtxeofnL/
Click into the input field and type a letter. If you have previously entered something in the input field (or another input field in your browser), the dropdown will appear. When you hover over one of the words in the dropdown, it'll appear in the input field and give it an opaque, white background.
Can this be done?
Autocomplete is browser and operating system specific. There doesn't appear to be any way to style the browser's own internal autocomplete function.
I would suggest disabling browser autocomplete altogether:
<input autocomplete="off">
Then utilizing JqueryUI's Autocomplete function, http://jqueryui.com/autocomplete/, which can be styled any which way you'd like.
Related
There is an input tag which gets some text and a button to submit the information. I want to make sure the user clicks button. This is not related to validating the input. Just want to make sure that if the user is viewing this page and has entered text then he must click the button before moving onto the next page.
<input type="text" class="form-control ng-pristine ng-valid ng-touched" placeholder="Search for a domain" name="page1.domainSearch" [(ngModel)]="searchValue" (ngModelChange)="func()" />
<button type="submit" class="search" (click)="func()" [disabled]="!searchValue"></button>
I know i can add a boolean variable to this component and then pass the value of this variable to the component having the button to progress to next page as an input. But is there any way to make sure of this in the same component?
I'm working on an HTML form for a web app. I'm adding the enterkeyhint attribute to indicate and navigate to the next input until the last one submits the form.
The problem is that enterkeyhint doesn't navigate to the next input if its type is type=text.
This happens on Chrome/83.0.4103.101 for Android 7. In Safari the hints button appears but they all do nothing.
Example:
<form (submit)="submitForm()">
<div>
<label>Name</label>
<input type="text" enterkeyhint="next" inputmode="text" />
</div>
<div>
<label>Email</label>
<input type="email" inputmode="email" enterkeyhint="next" />
</div>
<div>
<label>Comments</label>
<input type="text" />
</div>
</form>
Focusing on Name input, the Next button doesn't do anything.
Focusing on Email input, it navigates to any next input (Comments)
Now, if I change the type=email for type=text it doesn't navigate to the next input.
Similar behavior happens for type=tel. It does navigate to the next input of the form.
Am I missing something to make this work?
Thanks
enterkeyhint is just a hint to the browser what to display on the virtual keyboard, but you need to implement the actual behaviour yourself. See for example Focus Next Element In Tab Index, or How to focus next input field on keypress if your DOM is simple enough that the input fields are siblings with the default tab order.
From the spec:
The enterkeyhint content attribute is an enumerated attribute that specifies what action label (or icon) to present for the enter key on virtual keyboards. This allows authors to customize the presentation of the enter key in order to make it more helpful for users.
There is nothing in the spec to suggest that enterkeyhint actually affects the behaviour of the Enter key.
<form action="https://google.com" method="get">
<label for="id">Enter:</label>
<input id= "id1" type="text" name="" placeholder="Notlabebeld">
<input id= "id" type="text" name="" value="Labeled">
</form>
how this label tag works, i want to label 2nd input tag, but that's not what i get after this.
I know by writing label after first input tag, that will give desired result. Just want to know how it works :#
Adding a label to the input field has no effect on its positioning., it is mostly programmatic association. For text fields, it means that clicking on the label will focus the text field, for check-boxes, it will toggle the checkbox etc. Also, it is used by screen readers. You can place the input field at the bottom of the page and its label to the top of the page and still connect them using id and for.
There is great a documentation with examples on Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
I have a form with a set of inputs, and I want my page to refresh when one of them changes. I have a second set of inputs on the OTHER side of the page, and the css layout doesn't make it convenient for me to put them in the same <form> </form> tag. I was wondering if there is a way that I can make sure those "inputs" that are located outside of the <form> tag are still associated with that form.
Is there some way we can assign a "form id" to the inputs?
In HTML5, you can use the form attribute:
A form-associated element is, by default, associated with its ancestor form element, but may have a form attribute specified to override this.
If a form-associated element has a form attribute specified, then that attribute's value must be the ID of a form element in the element's owner Document.
Example:
<form id="myform">
<input id="something" type="text">
</form>
<button form="myform" type="submit">Submit that form over there</button>
You should however make sure that it is clear to the user that these visually separated form elements are in fact connected.
<input type="text" form="myform" /> worked for me.
Update
This worked great with FireFox, however gave me trouble in IE 11 as the form attribute is not recognized with IE (as of writing this).
I had to just set a hidden input field inside the form, and transferred value to hidden input field from input outside form; with onclick using jQuery.
<input class="checkbox" id="staff_recruiting" name="company_type"
value="staff_recruiting" type="checkbox">
<input type="hidden" value="all" name="keyword" id="search-keyword-input">
$('#search-keyword').keyup(function() {
$('#search-keyword-input').val($(this).val());
});
Your problem will be solved bro:
Add a hidden input field in your form.
Using jQuery or JS to change that hidden input field value with that outside input box.
Your page will refresh and your outside box value will be grabbed.
If I have an HTML input field like this one:
<input type="text" id="mytextfield"/>
all browsers seem to show the caret (insertion point) in the field. Is is possible to prevent this from appearing by applying some CSS or javascript?
(My reason for asking is that my input is the basis of a GWT-Ext combo box like the ones on http://www.gwt-ext.com/demo/#linkedComboBox - you can't type in it, but you can still see the caret, which is annoying).
What you could try is disable the input element and explicitly set its color to black:
<input type="text" disabled="disabled" style="color: black;" ... />
This should work for the GWT-Ext combo box (at least it did when setting the attributes in firebug).