Safari on iOS add a blue arrow when using a datalist with an input on a website, like this :
I found some thread to remove the same arrow for Chrome like this one : Remove Datalist Dropdown Arrow in Chrome and it works but not for iOS and I can't find a way to hide it.
<input type="text" list="datalist">
<datalist id="datalist">
<option>Carrots</option>
<option>Peas</option>
<option>Beans</option>
</datalist>
I created a basic demo here : https://jsfiddle.net/hudrfgw2/4/
Related
In my application, i have 3 step mat-stepper process. In First stepper, i have mat-form-field outline and it works fine but in Second and Third Stepper i have the same mat-form-field outline but the label is overlapping with border line like below.
<mat-form-field appearance="outline">
<mat-label>Member ID *</mat-label>
<input matInput placeholder="Test"
formControlName="memberID"
[(ngModel)]="submitPaymentRequest.getAccount().acctNum">
<mat-placeholder>TEst</mat-placeholder>
<mat-error app-validation-message></mat-error>
</mat-form-field>
i could see this is happening in IE only not in Chrome.
could any one help on this. Thanks in Advance
Unfortunately, Material Angular does not support IE properly (officialy, IE11+ is supported...).
If IE support is important to your project, use something else like https://materializecss.com/
I am working on adding custom CSS styling for my checkboxes via Awesome Bootstrap Checkboxes and have them actually showing up in the grids with them initially being checked or unchecked properly via JSON data being read...
the issue is when I go to change the value. The values are updating properly from when shown to when hidden.
However, instead of just the checkmark disappearing in the checkbox, the entire checkbox disappears and the only way for me to get it back is to change the value of the back to ui-grid-cell-focus manually through F12 debugger in the browser.
It appears something is not set up right with them, but I haven't been able to pinpoint exactly what he issue is yet...any help would be appreciated.
Cell Template:
cellTemplate:
`<!-- .blueCheckbox --> <div class="checkbox checkbox-primary"> <input type="checkbox" class="ng-scope" value="true" name="select_item" ng-model="row.entity.Name" /> <label></label> </div> <!-- end .blueCheckbox -->,`
Got them working...Had to enable the checkboxes and move them underneath the overlay and they worked fine...weird because its totally different from how it normally works...
Within the past few months, Google has updated Chrome and I think has broken radio buttons and checkboxes on my website. I'm using version 31.0.1650.63
They work correctly in all other browsers I've tried (FF, Safari, IE9 & IE10). I haven't modified my CSS at all the last few months, so that's why I think it's an issue with Google Chrome.
I've created a simple jsFiddle that shows the behavior I'm talking about (and an external link to my CSS file):
http://jsfiddle.net/v22WB/
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
I've used Chrome's dev tools to disable all styles from the stylesheet but with no luck.
I'm using Twitter Bootstrap 2.0.2, but when I reference that file by itself, the radio buttons and checkboxes are normal. Any ideas?
You've got this line in your stylesheet:
html body *:focus{outline-color:transparent;outline-style:none;-webkit-appearance:none}
The -webkit-appearance:none means input elements that have focus (ie a selected radio box or checkbox) aren't being displayed as input elements visually. See this link about customizing input styles. Take that out and your checkboxes should be back to normal.
This question already has answers here:
Turn off iPhone/Safari input element rounding
(11 answers)
Closed 9 years ago.
I'm using Twitter Bootstrap.
Here's a fiddle with my code. And here's the opened Github Issue
I have implemented a search input with an appended button, per the Bootstrap docs. My HTML for the form is shown here
<form class="form-search text-center" method="get" action="#">
<div class="input-append">
<input type="search" class="span7 search-query" name="q" autocomplete="off" placeholder="SEARCH" tabindex="1">
<button type="submit" class="btn"><i class="icon-search icon-large"></i> </button>
</div>
</form>
For some reason, when viewing the form on mobile (i.e. iPhone 5) the search box appears as displayed in the screenshot below:
When I view the search form in a desktop browser and resize it to "mobile size," the search box appears correctly as shown in this second screenshot (disregard the lighter border and size difference):
--------- QUESTION ---------
How can I prevent the search input from displaying incorrectly as in the first screenshot? And what could be causing this? I've looked at the source and computed styles for both search inputs, and everything appears to be the same. Help?
If I change the input type="search" to type="text" the problem does not exist, so it's got to be somewhere in the CSS, but I can't figure it out. What CSS actually applies this effect?
--------- UPDATE ---------
If I switch <div class="input-append"> to <div class="input-prepend"> the search input displays correctly. Also, when the field has focus, the rounded corner on the right turns "square" and appears correctly.
Looks like you can not. See this link
webkit html5 search inputs
quote:
WebKit has big time restrictions on what you can change on a search input. I would guess the idea is consistency. In Safari particularly, search fields look just like the search box in the upper right of the browser. The following CSS will be ignored in WebKit "no matter what", as in, you can't even fight against it with !important rules.
In others words, Safari will ignore your styles, and apply the standard look.
I am working on my new site and I checked it in multiple browsers: ie6+, chrome, safari and firefox.
I noticed that firefox display the top offset of my button in wrong position - like top=-1 and I cant fix it in NORMAL way...
Here's an example
http://jsfiddle.net/7XRZG/
Thank you
button inputs and text inputs seem to have different default vertical align properties in firefox. Try explicitly setting them to the same thing. For instance:
<input type="text" style="height:19px;border:1px solid silver;font-size:10px;vertical-align:text-top;">
<input type="button" value="Search" style="margin-left:5px;background-color:#f5f5f5;color:#707070;border:1px solid #e3e3e3;font-size:9px;padding:0 10px;height:21px;font-weight:700;vertical-align:text-top;">