1. 程式人生 > >手機端的各種預設樣式比如 ios的按鈕變灰色

手機端的各種預設樣式比如 ios的按鈕變灰色

1.ios按鈕變灰色,給按鈕加樣式:

-webkit-appearance: none;

2.有圓角話

.button{ border-radius: 0; } 

3.去除Chrome等瀏覽器文字框預設發光邊框

input:focus, textarea:focus {    outline: none;}
4.去掉高光樣式:
input:focus{    -webkit-tap-highlight-color:rgba(0,0,0,0);    -webkit-user-modify:read-write-plaintext-only;}
 5.所有瀏覽器下的文字框的邊框都不會有顏色上及樣式上的變化了,但我們可以重新根據自己的需要設定一下
input:focus,textarea:focus {    outline: none;    border: 1px solid #f60;}
6.去除IE10+瀏覽器文字框後面的小叉叉 
input::-ms-clear {    display: none;}
7.禁止textarea拖拽放大  
textarea {    resize: none;}

在這裡要提到一個屬性resize,這個是CSS3屬性,用於元素縮放,它可以取以下幾個值:

none 預設值

both 允許水平方向及垂直方向縮放

horizontal 只允許水平方向縮放

vertical 只允許垂直方向縮放

不僅可以針對textarea元素,對大多數元素都適用,如div等,在這裡不一一列舉,但與textarea不同的是,對div使用時需要加上一句overflow: auto;,也就是這樣才有效果:

div {    resize: both;    overflow: auto;}

相關推薦

手機各種預設樣式比如 ios按鈕灰色

1.ios按鈕變灰色,給按鈕加樣式: -webkit-appearance: none; 2.有圓角話 .button{ border-radius: 0; } 3.去除Chrome等瀏覽器文字框預設發光邊框 input:focus, textarea:focu

手機sticker布局,底部按鈕在屏幕底部

box border per scrip flow -c order -h nbsp <template> <div class="product-detail-container"> <div class="detail">

HTML+CSS PC 手機 公用部分樣式程式碼整理

1、css常用公用部分樣式程式碼整理:body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,  li, dl, dt, dd, form, a, fieldset, input, th, td  {mar

手機video預設全屏的相容寫法

需求:希望視訊播放時可以全屏播放,沒有進度條、播放按鈕等與系統相關的元素,視訊的寬度大於高度,並自動播放 瀏覽器效果展示: 實現全屏: 蘋果全屏相容,屬於文件內全屏 playsinline="true" x-webkit-airplay="true" webk

移動頁面預設樣式重置

1、-webkit-tap-highlight-color (這個屬性只用於IOS(iphone和ipad))    當你點選一個連結或者通過js定義的可點選的元素時,它會出現一個半透明的灰色背景,要重置這個表現,可以通過設定-webkit-tap-highlight-color為任何顏色。    eg、設定

問題8:手機實現點擊按鈕時更換顏色(解決IOS不顯示背景)

asc style cti focus 作用 cit art OS div CSS: .sval:active, .sval:focus{ background: #999;color:#fff;opacity:50; } 在觸屏上,:hover和:acti

手機 input submit IOS和Android中樣式相容問題

IOS有預設的渲染按鈕方式(漸變和圓角) IOS中按鈕高度不會隨行高自動調整       border:0;       height: 4em;       -webkit-app

關於微信手機IOS系統中input輸入框無法輸入的問題

inpu input mil net 手機端 family 輸入 tails 覆蓋 把-webkit-user-select:none改成-webkit-user-select:auto;覆蓋掉或者直接註釋掉就行! 別人家的博文:http://blog.csdn.net

前端 html h5 移動 手機 仿ios左滑刪除效果

es2017 b- open translate def sna 技術 9.png replace 實現功能:左滑列表項(<li class="route-item" ></li>),出現刪除按鈕(<div class="removeJs"&

css取消input、select默認樣式手機

dex pear put nta 會有 bsp 制作 -a padding IOS端: border-color:transparent; andorid端: 僅僅使用上面的代碼還不夠,可以發現select框在某些瀏覽器(包括微信)內置瀏覽器下 還會有箭頭以及高亮

JS監聽手機瀏覽器的後退按鈕的事件方法

轉載地址:http://www.jb51.net/article/89921.htm   首先我們要了解瀏覽器的history。 大家知道在頁面中我們可以使用javascript window history,後退到前面頁面,但是由於安全原因javascript不允許修改his

手機如何禁用預設鍵盤

只要是input型別,手機都會預設開啟鍵盤,那麼有什麼辦法可以禁止他開啟呢? 來看程式碼: <input type="text" @focus="inputNone"> inputNone() {     //禁止輸入框彈出預設鍵盤 docu

橫屏/豎屏提醒 ➕PC/手機端公用部分樣式程式碼整理

一:橫屏/豎屏提醒 <style> /*豎屏*/ @media only screen and (orientation:portrait ) { } /*橫屏*/ @media only screen and (orientation:landscape) {

手機車牌識別系統(支援安卓、ios系統)

私家車的數量的急劇增長,既帶來了喜也同樣帶來悲。一方面給我們的生活帶來的了很多便利,另一方面也同樣帶來了交通擁堵、交通事故等問題。因為對於車輛的管理尤為重要! 比如說違章停車登記,傳統方法是:執法人員通過攜帶的數碼相機對違法停車的車輛拍照取證,然後手動輸入車牌號碼進行登記。 針對於這種違章停車的管理問題,

手機車牌識別系統(支持安卓、ios系統)

技術分享 研發 手機端 -o 場景 分享圖片 號碼 blog 搜索 私家車的數量的急劇增長,既帶來了喜也同樣帶來悲。一方面給我們的生活帶來的了很多便利,另一方面也同樣帶來了交通擁堵、交通事故等問題。因為對於車輛的管理尤為重要! 比如說違章停車登記,傳統方法是:執法人員通過攜

ios 手機 input 框上方有內陰影

ios 手機端 input 框上方有內陰影 解決方案 方法一: <!--如果 ui 樣式裡有邊框,可以用外層盒子設定邊框--> input{ border:none; } 方法二: //在IOS下,input 和text

潤乾報表 V2018 手機展現引數模板下拉資料集樣式問題

電腦訪問帶有引數模板的報表,下拉資料集的樣式為 但是通過  showReport.jsp  或者是通過    matchReport.jsp    在手機端訪問報表的話,展現報表的引數模板的樣式丟失。

iOS 跳轉到手機設定各種頁面

/定位服務設定介面 NSURL *url = [NSURL URLWithString:@"prefs:root=LOCATION_SERVICES"]; if ([[UIApplication sharedApplication] canOpenURL:url]) { [[UI

vue 專案中 如何動態監聽瀏覽器以及iOS手機微信自帶的返回按鈕的事件

vue搭建的頁面中,左上角的返回按鈕,我自己定義了返回的了路徑,可是當執行時,就會發現,蘋果手機的下方會有自帶的返回按鈕(安卓手機沒有),那麼這個按鈕的返回事件該如何設定呢? 一般情況下,微信自帶的返回按鈕都是返回上一個路徑,可是當我的頁面時使用者掃碼進入的,沒有上一條路徑

Cannot read property 'nodeType' of null; audio元素預設樣式下載按鈕

1.chrome-->console丟擲如下錯誤: Uncaught TypeError: Cannot read property 'nodeType' of null 錯誤原因:從stackoverflow上查了,這個bug可能是由於dom元素未載入完而先執行了jquery程式