CSS：输入型提交按钮消失在Mac上的Safari 9（酋长）

Question

请帮助，我的web应用程序不会在应用程序的结尾展示Submit Button。是的，它是完美的工作，直到有人试图向使用Safari浏览器9（酋长）的应用程序。所以，他说没有submit button。我今天检查，并没有submit button在所有

我尝试添加这个CSS：（从另一个答案，但它没有工作）

input { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
} 

编辑：

我使用以防万一。

编辑：

我input是：

<input type="submit" class="btn btn-width bkgrnd-cyan" name="user_form"  
value="Submit" > 

CSS：

@charset "utf-8"; 
/* CSS Document */ 



body{ 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 12px; 
    color:#333; 
} 



input:read-only{ 
    background-color: #FFF; 
} 

#no-change { 
    color:white; 
} 


/* 
    ======================================== 
    Buttons 
    ======================================== 
*/ 
.btn { 
    border-radius: 5px; 
    display: inline-block; 
    margin: 0; 
} 
.btn-blue { 
    border: 1px solid #dfe2e5; 
    padding: 10px 30px; 
    background-color: #f0f8ff; 
    color:#012d6b; 
} 
.btn-silver { 
    border: 1px solid #dfe2e5; 
    padding: 10px 30px; 
    background-color: #f4f4f4; 
    color:#012d6b; 
} 

/* 
    ======================================== 
    Headings 
    ======================================== 
*/ 
h1, 
.h1 { 
    font-size: 36px; 
} 

h2, 
.h2 { 
    font-size: 30px; 
} 

h3, 
.h3 { 
    font-size: 24px; 

} 

h4, 
.h4 { 
    font-size: 18px; 
} 

h5, 
.h5 { 
    font-size: 14px; 
} 

h6, 
.h6 { 
    font-size: 12px; 
} 

.h1, 
.h2, 
.h3, 
.h4, 
.h5, 
.h6 { 
    font-family: Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,"Helvetica Inserat","Bitstream Vera Sans Bold","Arial Black",sans serif; 
    font-weight: 400; 
    text-transform: uppercase; 
    text-rendering: optimizeLegibility; 
    margin:0; 
    margin-bottom: 5px; 
} 

/* 
    ======================================== 
Page Formatting 
    ======================================== 
*/ 

/* 
    ====================================== 
Layout 
    ====================================== 
*/ 
.container { 
    margin: 0 auto; 
    padding-left: 30px; 
    padding-right: 30px; 
    max-width: 900px; 
} 
.container:before, 
.container:after { 
    display: table; 
    content: " "; 
} 
.container:after { 
    clear: both; 
} 

.header { 
    padding-left: 0; 
    list-style: none; 
} 
.header { 
    margin-bottom: 20px; 
} 
.header:before, 
.header:after { 
    display: table; 
    content: " "; 
} 
.header:after { 
    clear: both; 
} 
.header .row { 
    position: relative; 
} 

.header .app-title{ 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    text-align:right; 

} 

.nav-tabs li{ 
    background-color:#ECEDEA; 
    border-right: 1px solid #fff; 
} 

footer { 
    position: absolute; 
    width:100%; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    margin-top:20px; 
    background-color:#012d6b; 
    padding-bottom: 120px; 
} 
footer .container{ 
    padding:30px; 
    height:55px; 
} 
footer small{ 
    float:right; 
} 

.control-label-red:after { 
    content:"*"; 
    color:red; 
} 


.instructions{ 
    font-style: italic; 
    color: #999; 
} 

legend{ 
    width:inherit; /* Or auto */ 
    margin:0 20px; /* To give a bit of padding on the left and right */ 
    border-bottom:none; 
    padding:0 10px; /* To give a bit of padding on the left and right */ 
} 
fieldset{ 
    border:1px solid #ccc; 
    margin-bottom: 20px; 
    padding-left: 20px; 
    padding-right: 20px; 


} 

@-moz-document url-prefix() { 
    fieldset { 
     display: table-cell; 
    } 
} 


div { 
    margin-top:0px; 
    margin-bottom: 2px; 
} 


.div-custom { 
    margin-top: 5px; 
    margin-bottom: 2px; 
} 

textarea{ 
    margin-bottom: 15px; 

} 


#required{ 
    text-align: right; 
    font-weight: bold; 
} 


.instructionBig { 
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; 
    font-size: 12px; 
    color: #708090; 
} 

.labeltext { 
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; 
    font-weight: bold; 
    font-size: 11px; 
    color: #555; 
} 

.bodytext { 
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; 
    font-size: 11px; 
    color: #333; 
} 

table{ 
    border-collapse: collapse; 
    width: 100%; 

} 

tr.something{ 
    td { 
    width: 90px; 
    } 
} 

td{ 
    padding: 3px; 


} 

.bodytext { 
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; 
    font-size: 11px; 
    color: #333; 
} 

.td-extra-espace{ 
    padding-bottom: 10px; 
} 

#textarea-space{ 
    margin-bottom: 0; 
} 



.space{ 
    padding: 5px; 
} 



.btn-file { 
    position: relative; 
    overflow: hidden; 
} 
.btn-file input[type=file] { 
    position: absolute; 
    top: 0; 
    right: 0; 
    min-width: 100%; 
    min-height: 100%; 
    font-size: 100px; 
    text-align: right; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    outline: none; 
    background: white; 
    cursor: inherit; 
    display: block; 
} 


.btn-status{ 
    width:100%; 
    padding-right:20px; 
    padding-left:20px; 
} 

.btn.focus, .btn:focus, .btn:hover{ 
    outline: 0; 
} 


.btn-custom { 
    background-color: hsl(195, 79%, 90%) !important; 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#12c10e104", endColorstr="#d1eff9"); 
    background-image: -khtml-gradient(linear, left top, left bottom, from(#12c10e104), to(#d1eff9)); 
    background-image: -moz-linear-gradient(top, #12c10e104, #d1eff9); 
    background-image: -ms-linear-gradient(top, #12c10e104, #d1eff9); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #12c10e104), color-stop(100%, #d1eff9)); 
    background-image: -webkit-linear-gradient(top, #12c10e104, #d1eff9); 
    background-image: -o-linear-gradient(top, #12c10e104, #d1eff9); 
    background-image: linear-gradient(#12c10e104, #d1eff9); 
    border-color: #d1eff9 #d1eff9 hsl(195, 79%, 85%); 
    color: #333 !important; 
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.33); 
    -webkit-font-smoothing: antialiased; 
} 


.bold{ 
    font-weight: bold; 
} 

.btn-transparent{ 

     border: none; 
     background: transparent; 
} 



.well-custom{ 
    background: rgba(255, 255, 255, 0.9); 
    padding-top: 0px; 
    margin-bottom: 0px; 
    border: 0px; 
    margin-right:0px; 
} 

#edit-space{ 
    padding-bottom:0; 
    margin-bottom: 0; 
} 


.modal-body{ 
    padding-right: 50px; 

} 

@media print { 
    a[href]:after { 
    content: none !important; 
    } 
} 


.border-between > [class*='col-']:before { 
background: #e3e3e3; 
bottom: 0; 
content: " "; 
left: 0; 
position: absolute; 
width: 1.5px; 
top: 0; 
} 
.border-between > [class*='col-']:first-child:before { 
display: none; 
} 

.form-control-custom{ 
    font-size: 12px; 
    height: 28px; 
    width: 80%; 
} 

.hr-custom{ 
    margin-top: 0px; 
    margin-bottom: 0px; 
} 

.row.no-gutter [class*='col-']:not(:first-child),.row.no-gutter [class*='col-']:not(:last-child) { 
    padding-right:5px; 
    padding-left:0; 
} 

.btn-width{ 
    width:130px; 

} 

.input-size{ 
    width: 50%; 
} 

.input-grade{ 
    width: 30%; 
} 


.input-group .form-control { 
    height: 22px; 
    font-size: 9px; 
} 

#myModal { 
    -webkit-transform: translate3d(0, 0, 0); 
} 

label.error{ 
    color:red; 
} 

select.error{ 
    border-color: red; 
} 

.nav-tabs > li > a { 
    font-weight: bold; 
} 

input[type="radio"]{ 
    margin: 0 10px 0 10px; 
} 

.input-background 
{ 
    border: 0px; 
    background-color: #fff; 
    background: transparent; 
} 


.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { 
    background-color: #FFF; 
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0) inset; 

} 

.btn.focus, .btn:focus, .btn:hover { 
    color: #FFF; 

} 

.dl-horizontal dd { 
    margin-left: 180px; 
} 

.dl-horizontal dt { 
    height: 25px; 
} 

.dl-horizontal dt { 
    width: 170px; 
} 

Answer 1

在我CSS，我有以下代码：

input:read-only{ 
background-color: #FFF; 
} 

这是使我的提交按钮透明。所以，我只是删除这部分和代码工作正常Safari 9（埃尔卡皮坦）