I want to create a button as close to this image attached, with the border and a clear separation between it and the input box. Is this possible with css?
Here's a quick and easy way to accomplish this:
label {
border: 2px solid tan;
padding: 2px;
display: inline-block;
}
input {
background: tan;
border: 0;
width: 200px;
height: 20px;
padding: .5em;
font-size: 1.25em;
color: white;
}
<label>
<input />
</label>
Related
I am looking for a help to adjust the height of range slider depends on the target value?
As much as the user will drag the ball of the range, the left side's height will increase. It will be like filling the range. Could you help me how I can achieve this like in the UI has attached to this post.
This is the UI
Here is my code below:
HTML:
<div class="range-container">
<input type="range" name="range" id="range" min="0" max="100" value="0" />
<label for="range">DRAG</label>
</div>
CSS:
.range-container {
position: relative;
display: flex;
align-items: center;
}
#range {
width: 80%;
margin: 90px auto;
-webkit-appearance: none;
}
#range:focus {
outline: none;
}
#range::-webkit-slider-runnable-track {
background: var(--theme-col);
width: 100%;
height: 3px;
cursor: pointer;
}
#range::-webkit-slider-thumb {
-webkit-appearance: none;
height: 12px;
width: 12px;
background: blue;
border-radius: 50%;
border: 1px solid blue;
margin-top: -4px;
cursor: pointer;
}
I am trying to use CSS to expand the input box on hover/focus of the search ICON of CSS
Now, I am trying to call a function in html to angular component (seems that I cannot use CSS with datalist element) such that the input tag gets stays expanded when I shift the focus or select an item from datalist
Here is my sample HTML
<div class="searchDiv">
<span class="glyphicon glyphicon-search" id="searchSpan" (click)="searchEvent($event)"></span>
<form [formGroup]="searchGroup" (ngSubmit)="searchEvent($event)">
<input type="text" placeholder="search" id="searchInput" formControlName="localInput" class="" list="promotionsSearchList"
(keyup)="searchEvent($event)" />
</form>
<datalist id="promotionsSearchList" class="test"
onfocus="focusEvent()" onmousemove="focusEvent()">
</datalist>
</div>
Here is my CSS
.customClass {
float: center;
}
.grid {
display: inline-grid;
grid-template-columns: 150px 150px 150px 150px auto;
grid-template-rows: repeat(3,25px);
width: 100%;
}
#headerDiv {
grid-row : 1;
grid-column : 1/6;
padding-top: 14px;
}
#firstElementSpan {
grid-row:1;
grid-column:2/6;
}
#secondElementSpan {
grid-row:1;
grid-column:3/6;
}
#thirdElementSpan {
grid-row:1;
grid-column:4/6;
}
#fourthElementSpan {
grid-row:1;
grid-column:5/6;
}
.rounded-text-box{
border-radius: 2px;
border: 2px solid #555;
padding: 20px;
width: 200px;
height: 15px;
}
.searchDiv{
width: 500px;
vertical-align: middle;
white-space: nowrap;
position: relative;
}
.searchDiv input#searchInput{
width: 45px;
height: 30px;
background: white;
border: none;
font-size: 10pt;
float: left;
color: black;
/*this is to accomadate the search icon */
padding-left: 45px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.searchDiv #searchSpan{
/*the position needs to be mentioned as absolute for the icon to
appear on top of the input */
position: absolute;
top: 5%;
margin-left: 17px;
margin-top: 7px;
/*for now z index is mentioned as to make the icon on top */
/* z-index: 5; */
z-index : 1;
color: #4f5b66;
background-color: inherit;
}
.searchDiv input#searchInput:hover, .searchDiv
input#searchInput:focus, .searchDiv input#searchInput:active{
outline:none;
width:300px;
}
.searchDiv:hover input#searchInput{
width:300px;
}
.searchDiv:hover #searchSpan{
color: #93a2ad;
}
/* this is not working , hence tried to use get the element in
angular and change its DOM prop*/
datalist:active, datalist:focus input#searchInput{
width:300px;
}
This is my sample angular component call. I have just reduced to the point of func call at this point
focusEvent(){
console.log('onfocusEvent');
const inputElement = document.getElementById('searchInput');
inputElement.style.width = '300px';
}
I don't see the func being called. I tried to use angular's property binding as well but no luck. basically I want the input element to keep expanded when I have shift the focus to the datalist element and going through the list. Could you guys help?
Thanks to #CBroe to notifying this. We cannot listen to any events as well as not do any modifications using datalist. Hence I started using ul
Here is a sample html code modified:
<div class="searchDiv">
<span class="glyphicon glyphicon-search" id="searchSpan" (click)="searchEvent($event)"></span>
<input type="text" placeholder="search" id="searchInput" class="" list="promotionsSearchList"
(keyup)="searchEvent($event)" [(ngModel)]="searchModel"/>
<ul *ngIf="loadDropDown">
<li *ngFor="let pp of promoList" (click)="selectAnyItem($event)" value="pp.id"><span>{{pp.name}}</span>
</li>
</ul>
</div>
Here is the CSS that I implemented.
ul {
padding: 2px;
list-style-type: none;
z-index:2;
background-color:black;
/*below css makes the element clear the float and move to the next
line if placed in the same block */
clear:both;
}
li:hover{
background-color: dodgerblue;
}
.rounded-text-box{
border-radius: 2px;
border: 2px solid #555;
padding: 20px;
width: 200px;
height: 15px;
}
.searchDiv{
width: 500px;
vertical-align: middle;
white-space: nowrap;
position: relative;
}
.searchDiv input#searchInput{
width: 45px;
height: 30px;
background: white;
border: none;
font-size: 10pt;
float: left;
color: black;
/*this is to accomadate the search icon */
padding-left: 45px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.searchDiv #searchSpan{
position: absolute;
top: 5%;
margin-left: 17px;
margin-top: 7px;
z-index : 1;
color: #4f5b66;
background-color: inherit;
}
.searchDiv input#searchInput:hover, .searchDiv
input#searchInput:focus, .searchDiv input#searchInput:active{
outline:none;
width:300px;
}
.searchDiv:hover input#searchInput {
width:300px;
box-sizing:border-box;
}
.searchDiv:hover ul{
width:300px;
box-sizing: border-box;
}
.searchDiv:hover #searchSpan{
color: #93a2ad;
}
Hope this helps for the users who are trying to implement
I'm almost done, but my problem is the background of the text , I even try the opacity but the underline of the box appear.
.block {
display: inline-block;
border: 2px solid white;
padding: 5px;
margin-top: 1em;
}
.paddingbox{
padding: 60px;}
.boxed {
float: left;
color: white;
padding: 0 5px;
margin-top: -2em;
}
<div class="paddingbox"><center>
<div class="block">
<span class="boxed">
<h1 style="color:white;"><?php echo get_the_title(); ?></h1></span>
</div></center></div>
With backgroun color
without background color
I'm trying to achive is like this, but it have a back ground like in the picture above
I tried fieldset and this happen
The behavior can be achieved with a fieldset tag.
.block{
display: inline-block;
border: 2px solid white;
}
.title{
color: white;
font-size: 1.5em;
text-align: center;
}
body{
background: purple;
}
<fieldset class="block">
<legend class="title">
Services
</legend>
</fieldset>
I get help of positions for solve this question!
div {
position: relative;
width: 400px;
padding: 10px;
border: 1px solid;
}
span {
position: absolute;
top: -10px;
left: 40%;
background-color: #FFF;
font-weight: bold;
}
<div>
<span>About Us</span>
</div>
I'm trying to change a cursor property from :default to :se-resize when hover on the border of a box only. Is there any way how I can do it in in CSS? I need options only in CSS please!
The HTML:
<textarea placeholder="..."></textarea>
The CSS:
textarea {
width: 510px;
height: 140px;
padding: 5px 0;
border:2px solid #dddddd;
outline-style:none;
color: #777777;
}
Here, try this with a wrapping DIV that has the CSS for the hover.
.border {
background-color: red;
cursor: e-resize;
padding: 5px;
}
.contents {
background-color: white;
cursor: default;
height: 100px;
line-height: 100px;
text-align: center;
}
<div class="border">
<div class="contents">
Hello World
</div>
</div>
Also here: https://jsfiddle.net/vyk4c21b/9/
I want to make the search bar longer and higher. Lining up with the end of the body (width) and menu (heighth). I looked at other tutorials and questions but I am missing something.
CSS
form input[type="text"] {
height: 45px;
width: 250px;
margin: 0;
padding: 0;
font-size: 15px;
border: 1px solid #CCCCCC;
float: left;
}
HTML
<form name="catsearchform60238" method="post" action="/Default.aspx?SiteSearchID=2433&PageID=/search.html">
<div class="cat_textbox">
<input type="text" value="text field"></input>
<input type="submit" value="Submit"></input>
</form>
Using display: block; is probably what you are looking for.
form input[type="text"] {
display: block;
height: 45px;
width: 250px;
margin: 0;
padding: 0;
font-size: 15px;
border: 1px solid #CCCCCC;
float: left;
}