全局风格没有得到反映的角度组件

我有一个按钮，是每个组件通用的，所以而不是单独样式的组件，我决定把这些按钮样式在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

全局风格没有得到反映的角度组件

回答

相关问题