I want to make custom password in HTML But when i am running it with browser like chrome , Mozilla its not visible there.Please find my HTML & CSS.What wrong i am doing?
<link href="mypwd.css" rel="stylesheet" type="text/css" />
<input type="password" class="pwd">
CSS File:
.pwd{
border: 3px;
border-color: red;
}
It's there, you just haven't defined a proper border.
Try this:
.pwd {
border: 3px solid red;
}
Or if you'd rather not use shorthand:
.pwd {
border-color: red;
border-style: solid;
border-width: 3px;
}
<link> will have to be in the <head> as far as I know.
Also border should be:
border: 3px solid red;
Change your class to
.pwd{
border : 3px solid red;
}
For more infor check this fiddle
Related
I have a html file that asks user for information, by inputting information into a form box (i.e name, email address, age). When these fields are blank, they should be highlighted with a red border.
If I put the following css styling code in the html page, the highlighting works. However, if I store it in an external css page, the highlighting does not work.
The below works, but the second set doesn't work when it is in the external css file.
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
</style>
</head>
<style>
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
</style>
How would I go about getting the styling to work from the css file, or is it even possible?
Another approach could be to add classes like .valid and .invalid to the input fields on posting to signify the validity of the fields. This will also circumvent any specificity issues you might be having with your original approach.
input.invalid {
border: 2px dashed red;
}
input.valid {
border: 2px solid black;
}
<input class="invalid" type="text" name="name" placeholder="Invalid" />
<input class="valid" type="text" name="name" placeholder="Valid" />
I have two css IDs on different files, and I have to change the file with another only when the Program executes in Internet Explorer.
I have this file called "custom.css":
#employee-list {
border-bottom: 1px solid #c1c1c1;
border-top: 1px solid #c1c1c1;
height: initial;
}
I need (I must not modify custom.css) to set "height" to "auto". But only if the page is rendered on IE. So I created a second css file called "customie.css":
#employee-list {
border-bottom: 1px solid #c1c1c1;
border-top: 1px solid #c1c1c1;
height: auto;
}
After that I wrote this Conditional Comment in the <head> of my MasterPage .cshtml.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="customie.css" />
<![endif]-->
Problem is this: Conditional Comment doesn't work and the customie.css file overwrites the custom.css(which annuls itself) .
How can I apply height: auto only for IE pages?
Thank you,
Angelo
No idea why the conditional isn't working, but you can achieve the desired effect using the CSS below. IE doesn't support initial, so it will fall back to auto instead.
#employee-list {
border-bottom: 1px solid #c1c1c1;
border-top: 1px solid #c1c1c1;
height: auto;
height: initial;
}
Current result: bottom border is colored gray
Desired result: all borders are white
Problem: border-color is set to white in the CSS
.zoom {
border-width: 2px 0px 2px 0px;
background: white;
border-color: white;
}
<button class="zoom">???</button>
You have to set the border-style as solid explicitly for it to work. The gray border that you see at the bottom is because of the default UA styling which I is border-style: outset.
As noted by Marcos Pérez Gude in his comment the default border-style for buttons is outset and that for input and textarea elements is inset.
.zoom {
border-width: 2px 0px 2px 0px;
background: white;
border-color: white;
border-style: solid;
}
<button class="zoom">???</button>
Screeshot of UA Stylesheet Value:
Add this line in your CSS
border-style: solid;
As Harry highlighted : You need to specify the style of the border in order to change the default.
you can also use an easier-to-remember code like this :
.zoom {
border-top:3px solid white;
border-bottom:3px solid white;
background-color:white;
}
<button class="zoom">???</button>
In bootstrap 4, you can use border utilities to add or remove an element’s borders.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<button class="border-0 bg-white">???</button>
I am applying a background image on input type button. for this i have written my code in style.css. But now i want that button will look like as it is default, but my restriction is that i can not delete css style from style.css. But i can override it in other css style1.css.
so how can i override this?
style.css
button
{
background:red;
}
if i override like this it shows nothing.
style1.css
button
{
background:none;
}
Probably a duplicate question for Can you style html form buttons with css?.
Well, as far as button or any other input type is considered you can do that by adding this:
HTML
<input type="submit" name="submit" value="Submit Application" id="submit" />
CSS
#submit {
background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:6px;
color: #fff;
font-family: 'Oswald';
font-size: 20px;
text-decoration: none;
cursor: poiner;
border:none;
}
#submit:hover {
border: none;
background:red;
box-shadow: 0px 0px 1px #777;
}
You can even try this,
input[type="submit"]{
background: #fff;
border: 1px solid #000;
text-shadow: 1px 1px 1px #000;
}
or even, you can add a class:
.my_button_type
{
background: #fff;
border: 1px solid #000;
text-shadow: 1px 1px 1px #000;
}
You can apply inline styling also:
<input type="button" style="background: #333; border: 0px;" />
So, you have many ways to do it.
You can either use inline styles, or use !important.
Example:
style1.css
button
{
background:none !important;
}
Or inline:
<button style="background: none;">
You can do it like this...
button { background:none !important; }
First, precedence is important:
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style1.css" />
You must put the css file after the original css that you want to overwrite.
Second, in your style1.css, there are so many approach do achieve what you want. Like cancelling out the css style that you want to overwrite
//style.css
button {
background: url("...");
}
//style1.css
button {
background: none;
}
or using !important to attributes you want to implement.
I want to change the look of search box. In stackoverlow, as you can see, the search box is exactly rectangular. I want to have a search box like elips( at the borders ), not rectangular.
How can it be done?
Thanks
You can do this
.ClassNameOfYourSearch {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Change the number for the px as necessary.
Example: http://jsfiddle.net/jasongennaro/nynxE/
<!DOCTYPE html>
<head>
<title>Sample Search Boxt</title>
<style>
#search {
border: 1px solid #CCC;
width: 100%; height: 25px;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
}
input[type="text"] {
outline: none;
border: none;
}
</style>
</head>
<body>
<input type="text" id="search" />
</body>
</html>
You can run that directly into the notepad++ or whatever tool your using. I didn't include the JavaScript that their using to add that grey click affect, but this has the border radius that you can mess around with.
Example Here
You can use border-radius on the input element.
Or you could use type="search", which a lot of browsers are rounding by default. I'd still recommend adding border-radius too as the default of the browser's CSS are vendor specific.