I can make an input element respond to :hover and :hover:disable
But looks like a div doesn't respond the same.
.btn {
width: 99px;
border-color: 2px #787878;
background-color: #CACACA;
margin-left: 76px;
margin-top: 21px;
position: relative;
border-radius: 26px;
-moz-border-radius: 26px;
-webkit-border-radius: 26px;
cursor: pointer;
}
.btn:hover:disabled {
background: red;
cursor: no-drop;
}
<div class="btn" id="divDisable" style=" height: 30px;line-height: 30px; text-align: center;" disabled>Disabled
</div>
<input class="btn" id="iDisabled" type="submit" value="Disabled" disabled>
Full Sample with everything i tried
Bonus Info
Question was answer div doesn't have Disable
Make div content Disable
http://jsfiddle.net/WS47f/
A div element doesn't have a disable attribute. You could add a class in this case for your CSS.
div.divDisable:hover {}
Maybe late for the party, but solution is to use .btn[disabled]:hover instead of .btn:disabled:hover. First one does not detect disabled state (which doesn't exist on div) but rather targets existence of disabled attribute.
.btn {
width: 99px;
border-color: 2px #787878;
background-color: #CACACA;
margin-left: 76px;
margin-top: 21px;
position: relative;
border-radius: 26px;
-moz-border-radius: 26px;
-webkit-border-radius: 26px;
cursor: pointer;
}
.btn[disabled]:hover {
background: red;
cursor: no-drop;
}
<div class="btn" id="divDisable" style=" height: 30px;line-height: 30px; text-align: center;" disabled>Disabled
</div>
<input class="btn" id="iDisabled" type="submit" value="Disabled" disabled>
To get both to do the same thing do:
.btn:hover {
background: red;
cursor: no-drop;
}
Here is a Fiddle that demonstrates: https://jsfiddle.net/cs8rbjkh/
Related
I currently have 2 submit buttons that cannot be place side by side.
.submit-button {
color: #fff;
background: #55a1ff;
border: 0;
outline: 0;
width: calc(15%);
height: 50px;
font-size: 16px;
text-align: center;
cursor: pointer;
margin-top: 70px;
margin-left:100px;
border-radius: 30px;
}
.cancel-button {
color: #fff;
background: #55a1ff;
border: 0;
outline: 0;
width: calc(15%);
height: 50px;
font-size: 16px;
text-align: center;
cursor: pointer;
margin-left:450px;
border-radius: 30px;
}
<div class="arrange3">
<button type="submit" class="submit-button" name="save", value="save">Submit</button>
</div>
<div class="arrange3">
<button type="cancel" class="cancel-button" name="cancel", value="save">Cancel Claim</button>
</div>
How am i suppose to place the buttons side by side. It would be great if u can provide the code to me. Thanks
Make arrange3 class display inline.
.arrange3{
display: inline;
}
icon position work's fine on chrome. but on mozzilla, the icon move from the position. the question is, how to implement this code to mozilla firefox? is there a difference for chrome or mozzilla? The css code is below
.searchbar-1{
float: right;
width: 300px;
vertical-align: middle;
white-space: nowrap;
position: relative;
margin-right: 120px;
margin-top: -4px;
}
.searchbar-1 input#search{
width: 300px;
height: 40px;
background: #E6E7E9;
border: none;
font-size: 10pt;
font-style: italic;
float: left;
color: #63717f;
padding-left: 45px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.searchbar-1 input#search::-webkit-input-placeholder {
color: #65737e;
}
.searchbar-1 input#search:-ms-input-placeholder {
color: #65737e;
}
.searchbar-1 .icon{
position: absolute;
top: 0%;
margin-left: 12px;
margin-top: 9px;
z-index: 1;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="searchbar-1">
<span class="icon"><i class="material-icons" (click)="applyFilterCustom(search)">search</i></span>
<input type="text" [(ngModel)]="search" id="search" placeholder="Where would you like to go next?" name="search" (keyup.enter)="applyFilterCustom(search)" />
</div>
Whenever you use position: absolute; you must have to define position. in your case you have defined the top position but not left or right so based on your requirement you have to define any of them. which will resolve your issue for browser.
I am trying to create a form with a submit button. I am trying to apply some css to the button in a stylesheet, but for some reason the text has disappeared from the button!
When I remove all css from the stylesheet (or remove the id from the div) the button disappears completely instead of going to the default style. Could someone tell me what I am doing wrong?
HTML:
#submit
{
background-color: #5AB753;
color: black;
text-align: left;
border: none;
border-radius: 5px;
position: absolute;
left: 683px;
top: 500px;
width: 170px;
height: 51px;
font-family: 'Lato';
text-align: center;
font-size: 30px;
color: #FFFFFF;
float: left;
}
#submit:hover
{
background-color: #96D091;
float: left;
}
<div id="submit" type="submit" value="Join now" />
Use a button element instead of div.
Note that the default type for a button is submit, so you can remove that.
#submit {
background-color: #5AB753;
color: black;
text-align: left;
border: none;
border-radius: 5px;
position: absolute;
left: 683px;
top: 500px;
width: 170px;
height: 51px;
font-family: 'Lato';
text-align: center;
font-size: 30px;
color: #FFFFFF;
float: left;
}
#submit:hover {
background-color: #96D091;
float: left;
}
<button id="submit">Join now</button>
A Stackoverflow answer with good reasons to use button over input type="submit" can be found here: https://stackoverflow.com/a/33663114/5561605
use
#submit
{
background-color: #5AB753;
color: black;
text-align: left;
border: none;
border-radius: 5px;
position: absolute;
left: 683px;
top: 500px;
width: 170px;
height: 51px;
font-family: 'Lato';
text-align: center;
font-size: 30px;
color: #FFFFFF;
float: left;
}
#submit:hover
{
background-color: #96D091;
float: left;
}
<input id="submit" type="submit" value="Join now" />
Current:
<div id="submit" type="submit" value="Join now" />
Update html code with below code:
<input id="submit" type="submit" value="Join now" />
I´m trying to build a search element together with a button, something like:
Except that I need to change the background color of the search icon (blue, gray, whatever...).
Here is my code so far and the result:
.searchWrap {
position: absolute;
border: thin solid #f2f2f2;
border-radius: 5px;
top: 5px;
left: 5px;
}
.searchTerm {
float: left;
border-style: none;
padding: 5px;
height: 20px;
outline: none;
}
.searchButton {
right: -50px;
width: 30px;
height: 20px;
border: 1px solid #f2f2f2;
background: #f2f2f2;
border-radius: 5px;
text-align: center;
color: #ccc;
vertical-align: middle;
cursor: pointer;
}
<div className="searchWrap">
<input type="text" className="searchTerm" placeholder="Search..." />
<button type="submit" className="searchButton">
<Icon name='search' />
</button>
</div>
I'm using React. Here is my result so far:
The external border is rounded, ok, that's what I need, but the separation between the searchTerm and the searchButton is also rounded, and I need a plain separator here, something like:
I'm using font awesome here, so the code isn't spaced like your screenshot, but looks like you have your own library you're using with react for that icon and your spacing is fine.
All you need to do is use border-radius: 0 5px 5px 0 to keep the left side borders from rounding, and assign a border-left on the .searchButton to draw the vertical line. I changed the border color so it's more prominent, but you can use whatever color you want.
*{margin:0;padding:0;}
.searchWrap {
position: absolute;
top: 5px;
left: 5px;
}
.searchTerm {
float: left;
border-style: none;
padding: 5px;
height: 20px;
outline: none;
margin-left: 3px;
border: thin solid #ddd;
border-width: thin 0 thin thin;
border-radius: 5px 0 0 5px;
}
.searchButton {
right: -50px;
width: 30px;
height: 32px;
border: 1px solid #f2f2f2;
background: #f2f2f2;
border-radius: 0 5px 5px 0;
text-align: center;
color: #ccc;
vertical-align: middle;
cursor: pointer;
border: thin solid #ddd;
}
.searchTerm:focus, .searchTerm:focus + .searchButton {
border-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="searchWrap">
<input type="text" class="searchTerm" placeholder="Search..." />
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
Try this for the search button css instead of border-radius
.searchButton {
...
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
...
}
Can you use bootstrap? Relatively simple, and once you have it, modify the css the way you want it.
https://v4-alpha.getbootstrap.com/components/input-group/#button-addons
Bootstrap is strongly recommended for this. See http://getbootstrap.com/components/#input-groups. Coupled with FontAwesome, you could do something like this:
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="fa fa-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
</div>
this is my first question here.
I'm having an issue getting my html form buttons side by side.. can somebody take a look and tell me whats wrong? it'd seem like they should by default be placed inline, but I guess that isnt the case.
Here is my html code.
<input type="submit" name="1" formtarget="" value="1">
<input type="submit" name="2" formtarget="" value="2">
<input type="submit" name="3" formtarget="" value="3">
<input type="submit" name="4" formtarget="" value="4">
and here is the CSS for the form input and individual name
#form input {
position: relative;
display: inline;
margin: 0;
padding: 0;
border: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 4px;
border-radius: 4px;
text-shadow: none;
line-height: 44px;
-webkit-appearance: none;
}
and this is the same for each button besides the color changes.
#form input[name="1"] {
margin-top: 8px;
height: 44px;
width: 50%;
background: #A901DB;
border-bottom: 1px solid #B404AE;
color: #FFF;
font-size: 18px;
text-align: center;
}
#form input[name="2"] {
margin-top: 8px;
height: 44px;
width: 50%;
background: #A901DB;
border-bottom: 1px solid #B404AE;
color: #FFF;
font-size: 18px;
text-align: center;
}
Can someone help me set this up so that they are inline, side by side?
EDIT: This is what it shows.
http://jsfiddle.net/g01juc2z/2/
you have 4 elements set to width:50% which equals 200% width. Change them to width: 24% (inline-block elements have a natural spacing of 1 or 2px) or less and they will be aligned:
#form input[name="1"] {
margin-top: 8px;
height: 44px;
width: 24%; <---------------
background: #A901DB;
border-bottom: 1px solid #B404AE;
color: #FFF;
font-size: 18px;
text-align: center;
}
FIDDLE
in your css make these change where you write
[name="1"]
replace it with
[type="submit"]
and do not repeat it like a name
and another change is
width:24%;