全局風格沒有得到反映的角度組件

我有一個按鈕，是每個組件通用的，所以而不是單獨樣式的組件，我決定把這些按鈕樣式在style.css中。全局風格沒有得到反映的角度組件

但它劑量工作的所有其他屬性，如背景和p標籤的作品，但不是這個按鈕是因爲我用這個按鈕的webkit。

我工作時，我把它放在單個組件中。

CSS

input { 
    outline: none; 
    float: right; 
} 
input[type=search] { 
    -webkit-appearance: textfield; 
    -webkit-box-sizing: content-box; 
    font-family: inherit; 
    font-size: 100%; 
} 
input::-webkit-search-decoration, 
input::-webkit-search-cancel-button { 
    display: none; 
} 


input[type=search] { 
    background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center; 
    border: solid 1px #ccc; 
    padding: 9px 10px 9px 32px; 
    width: 55px; 
    height:15px; 
    -webkit-border-radius: 10em; 
    -moz-border-radius: 10em; 
    border-radius: 10em; 

    -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    transition: all .5s; 
} 
input[type=search]:focus { 
    width: 130px; 
    background-color: #fff; 
    border-color: #66CC75; 

    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); 
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); 
    box-shadow: 0 0 5px rgba(109,207,246,.5); 
} 


input:-moz-placeholder { 
    color: #999; 
} 
input::-webkit-input-placeholder { 
    color: #999; 
} 
input { 
    outline: none; 
    float: right; 
} 
input[type=search] { 
    -webkit-appearance: textfield; 
    -webkit-box-sizing: content-box; 
    font-family: inherit; 
    font-size: 100%; 
} 
input::-webkit-search-decoration, 
input::-webkit-search-cancel-button { 
    display: none; 
} 


input[type=search] { 
    background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center; 
    border: solid 1px #ccc; 
    padding: 9px 10px 9px 32px; 
    width: 55px; 
    height:15px; 
    -webkit-border-radius: 10em; 
    -moz-border-radius: 10em; 
    border-radius: 10em; 

    -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    transition: all .5s; 
} 
input[type=search]:focus { 
    width: 130px; 
    background-color: #fff; 
    border-color: #66CC75; 

    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); 
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); 
    box-shadow: 0 0 5px rgba(109,207,246,.5); 
} 


input:-moz-placeholder { 
    color: #999; 
} 
input::-webkit-input-placeholder { 
    color: #999; 
}

模板

<div class="col l3 offset-l9"> 
    <input type="search" placeholder="Search" #input> 
</div>

這是它應該如何看

這是它現在怎麼看

使用視圖封裝我試過，但我認爲二硝基甲苯使任何diffrence作爲對母兒的造型，這些都是蹦牀網上單組分

請幫助 -

來源

2017-08-05 INFOSYS

那麼它的工作時，我嘗試了

input { 
 
    outline: none; 
 
    float: right; 
 
} 
 
input[type=search] { 
 
    -webkit-appearance: textfield; 
 
    -webkit-box-sizing: content-box; 
 
    font-family: inherit; 
 
    font-size: 100%; 
 
} 
 
input::-webkit-search-decoration, 
 
input::-webkit-search-cancel-button { 
 
    display: none; 
 
} 
 

 

 
input[type=search] { 
 
    background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center; 
 
    border: solid 1px #ccc; 
 
    padding: 9px 10px 9px 32px; 
 
    width: 55px; 
 
    height:15px; 
 
    -webkit-border-radius: 10em; 
 
    -moz-border-radius: 10em; 
 
    border-radius: 10em; 
 

 
    -webkit-transition: all .5s; 
 
    -moz-transition: all .5s; 
 
    transition: all .5s; 
 
} 
 
input[type=search]:focus { 
 
    width: 130px; 
 
    background-color: #fff; 
 
    border-color: #66CC75; 
 

 
    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); 
 
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); 
 
    box-shadow: 0 0 5px rgba(109,207,246,.5); 
 
} 
 

 

 
input:-moz-placeholder { 
 
    color: #999; 
 
} 
 
input::-webkit-input-placeholder { 
 
    color: #999; 
 
} 
 
input { 
 
    outline: none; 
 
    float: right; 
 
} 
 
input[type=search] { 
 
    -webkit-appearance: textfield; 
 
    -webkit-box-sizing: content-box; 
 
    font-family: inherit; 
 
    font-size: 100%; 
 
} 
 
input::-webkit-search-decoration, 
 
input::-webkit-search-cancel-button { 
 
    display: none; 
 
} 
 

 

 
input[type=search] { 
 
    background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center; 
 
    border: solid 1px #ccc; 
 
    padding: 9px 10px 9px 32px; 
 
    width: 55px; 
 
    height:15px; 
 
    -webkit-border-radius: 10em; 
 
    -moz-border-radius: 10em; 
 
    border-radius: 10em; 
 

 
    -webkit-transition: all .5s; 
 
    -moz-transition: all .5s; 
 
    transition: all .5s; 
 
} 
 
input[type=search]:focus { 
 
    width: 130px; 
 
    background-color: #fff; 
 
    border-color: #66CC75; 
 

 
    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); 
 
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); 
 
    box-shadow: 0 0 5px rgba(109,207,246,.5); 
 
} 
 

 

 
input:-moz-placeholder { 
 
    color: #999; 
 
} 
 
input::-webkit-input-placeholder { 
 
    color: #999; 
 
}

<div class="col l3 offset-l9"> 
 
    <input type="search" placeholder="Search" #input> 
 
</div>

[https://jsfiddle.net/xr9fvLgd/]

來源

2017-08-05 10:03:17

彼得我知道它的工作，但是當我把它放在全球styles.css的，而不是部分的CSS那麼不是 – INFOSYS

組件可能在全球範圍內覆蓋了你的風格你是否在組件和全局中輸入了[type = search]，並且它們都有其他樣式 –

請確保您的全局鏈接低於您的網站頭部中的組件鏈接 –

您可以在'.angular-cli.json'文件中應用Global Style並適用於整個項目。

在Visual Studio代碼中打開您的代碼文件夾，然後查找'.angular-cli.json'文件，在'apps'數組對象對象中添加樣式數組對象。

"apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
     "styles.css", 
     "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
     ],

來源

2017-08-05 10:08:19

它已經在那裏@MThomas因爲所有其他的樣式都在工作，只是這些按鈕樣式沒有得到反映，所以知道爲什麼 – INFOSYS

使用全局樣式和相關組件禁用視圖CSS封裝，添加：

@Component({ 
.. 
encapsulation: ViewEncapsulation.None, 
.. 
}

來源

2017-08-06 22:44:23 sancelot

全局風格沒有得到反映的角度組件

回答

相關問題