I have the following html file:
<html>
<head>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all" />
</head>
<body>
<div>
<input type="text" />
<input type="email" />
<input class="button" id="clickme" type="submit" value="Click Me" />
</div>
</body>
</html>
There is a link in the head block pointing to a css file that is:
body {
background: gray
background-image: url(“../images/bg-body.jpg”);
}
input[type=”text”], input[type=”email”] {
border: none;
}
The background image loads but the two inputs still have a visible border. In both IE and Chrome. However, it works if I specify the style inline.
I am using Notepad++ to edit html and css. The ; wasn't a typo but shows another problem. If I specify both color and image, in IE the image shows but in Chrome it doesnt. Is there some priority at work here?
Update your CSS like below. Replace ” with "
body {
background: gray;
background-image: url("../images/bg-body.jpg");
}
input[type="text"], input[type="email"] {
border: none;
}
EDIT:
By the way it will work without the quotation mark also.
body {
background: gray;
background-image: url(../images/bg-body.jpg);
}
input[type=text], input[type=email] {
border: none;
}
Related
I am working vue js project for my own skill development.
When I change bootstrap-vue toggler background color but Unfortunately background-color isn't changed? I am new in Vue js. please solve this problem if you can?
Vue Structure:-
<div class="toggler-btn">
<b-form-checkbox v-model="checked" name="check-button" switch>
</b-form-checkbox>
</div>
Style:-
<style scoped>
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: red !important;
background-color: red !important;
}
</style>
Your problem is because of style scoping. You can create a global.css and put all your global styles in there. I prepared a working code snippet based on your code to see that it's working.
new Vue({
el: '#app'
})
.custom-control-input:checked~.custom-control-label::before {
color: #fff;
border-color: red !important;
background-color: red !important;
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-form-checkbox name="check-button" switch size="lg" />
</div>
This may be due to the scoped styling. Try this:
<style scoped>
::v-deep(.toggler-btn) {
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: red !important;
background-color: red !important;
}
}
</style>
The top part of my checkbox do not word anymore after resizing it and resetting materialize.
Here is sample code:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style>
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1;
position: relative;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 0px;
}
</style>
</head>
<body>
<form action="">
<label><input type="checkbox" class="reset-checkbox" style="width:20px;height:20px;" checked="checked" name="firstCheck"/></label>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
Here is the jsfiddle for you to try to click the top part of the checkbox if you want:
https://jsfiddle.net/j4oxgmtc/
Any idea or solution?
Thank you!
Andreas responded to that question in a comment: Exclude materialize css for some specific checkbox
''This happens, because is an inline element. You can set display: inline-block for it to fix it.''
Here is the modified working code: https://jsfiddle.net/vL3fsqjb/2/
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style>
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1;
position: relative;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 0px;
}
</style>
I browsed the documentation for Select2 (https://select2.org) and searched their forum but haven’t found the answer - it may be that my limited experience is such that I’m not even asking the right question:
I am using the Materialize css (https://materializecss.com/) for my site’s styling. How can I get my Select2 dropdown to match the look of the rest of my page?
Here is my HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.13/dist/css/select2.min.css" rel="stylesheet" />
</head>
<body class="body-custom">
<div class="input-field col s12">
<select class="js-example-basic-single" name="country" id="country">
<option value="" disabled selected>Choose Country</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Åland Islands">Åland Islands</option>
<option value="Albania">Albania</option>
</select>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.13/dist/js/select2.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
CSS:
#form {
max-width: 700px;
margin-top: 50px;
}
.type label {
margin-right: 50px;
}
#proid {
display: none;
}
.info {
padding-left: 10px;
padding-bottom: 20px;
padding-top: 50px;
}
.nav-custom {
background-color: #333947;
}
.body-custom {
background-color: #f0f7fa;
}
.title {
font-family: "Open Sans";
font-weight: 600;
}
EDIT 1:
Codepen link:
https://codepen.io/Nola111/pen/yLNzeQp
Ok so this is a work in progress as I'm sure you're going to ask me to style the dropdown next..!
https://codepen.io/doughballs/pen/zYGERzX
So first off, Select2 is forcing a 700px width on the select, which is making it wider than the materializecss inputs (which are always width: 100%). So we override it here. !important flag is needed unfortunately.
.select2 {
width:100% !important;
}
Next up, the actual select field. As you know materializecss uses very minimal styling - just a border bottom in fact. So I looked at the base styles that are applied to all materializecss input fields, copied them into the codepen and then applied them to the following two elements. Select2 does real funky things, lots of nested divs (urgh) and it took a little while to figure out what the hell it is doing:
span.select2-selection.select2-selection--single,
span.select2-selection__rendered {
// These are base materializecss input styles
padding-left:0 !important;
position: relative;
cursor: pointer;
background-color: transparent;
border: none;
border-bottom: 1px solid #9e9e9e;
outline: none;
height: 3rem;
line-height: 3rem;
width: 100%;
font-size: 16px;
margin: 0 0 8px 0;
padding: 0;
display: block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 1;
border-radius: 0;
}
As a final note - can I ask why you are using a 3rd party library for Selects? I don't know much about Select2, I did have a quick look at the docs and apparently they offer extended functionality to Select inputs. Materializecss can do the same without overriding styles and importing extra css.
If you are interested, I can show you a codepen that uses autocomplete to get similar functionality to your example. Here
Can anyone tell me why my pseudo selector is not working?
I thought it would be pretty straightforward..
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<form id="registerForm" method="POST" action="register_post.php" >
<p class="registerSubmit">
<input id="submit" type="submit" name="submit" value="submit">
</p>
</form>
<style>
.registerSubmit #submit {
background: white;
}
.registerSubmit #submit :hover {
background: red;
}
<style>
</body>
</html>
Would appreciate it.. thanks.
see this code:
<style>
.registerSubmit #submit {
background: white;
}
.registerSubmit #submit:hover {
background: red;
}
<style>
See one more time:
.registerSubmit #submit:hover {
look one last time:
#submit:hover {
Are Achieve see the space?
Bye!
http://jsfiddle.net/NfYrj/
Apply :hover to submit only, not the entire form.
#submit:hover {
background: red;
}
What the hell is that? I found there is some problem with padding in chrome with this elements but even if set the padding to 0 in both (textarea and input) they are not "looking same" width in chrome. The code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title>WTF</title>
<style>
input {
width: 200px;
padding: 0px;
}
textarea {
width: 200px;
padding: 0px;
}
table {
background-color: blue;
}
</style>
</head>
<body>
<form>
<table>
<tr><td><input type="text" /></td></tr>
<tr><td><textarea></textarea></td></tr>
</table>
<form>
</body>
</html>
If you add border:0, it fixes itself in chrome. See fiddle: http://jsfiddle.net/Q96yN/2/