This question already has answers here:
CSS "and" and "or"
(9 answers)
Closed 2 years ago.
Suppose, I have a div with following css proprties among with other similar divs.
<div
style="
display: block;
width: 200px;
border-right: 1px solid rgb(237, 237, 236);
white-space: nowrap;
min-height: 32px;
cursor: default;
padding: 5px 8px 6px;
font-size: 14px;
overflow: hidden;
height: 32px;
"
>
howdie
</div>
I want to select div by 2 inline properties display: block; and white-space: nowrap;.
I know I can select the div by one property like display: block;:
div[style*="display: block;"]{
// div selected
}
But can't select the div by 2 properties:
div[style*="display: block; white-space: nowrap;"]{
// nothing get selected
}
How to select div (without js) by 2 inline properties which may not be sequential like display: block; and white-space: nowrap;?
Specify style*=[""] for each style like this:
div[style*="display: block;"][style*="white-space: nowrap;"]{
...
}
div[style*="display: block;"][style*="white-space: nowrap;"]{
color: red;
}
div[style*="display: block;"]{
color: green;
}
<div
style="
display: block;
width: 200px;
border-right: 1px solid rgb(237, 237, 236);
white-space: nowrap;
min-height: 32px;
cursor: default;
padding: 5px 8px 6px;
font-size: 14px;
overflow: hidden;
height: 32px;
"
>
howdie
</div>
<div
style="
display: block;
width: 200px;
border-right: 1px solid rgb(237, 237, 236);
min-height: 32px;
cursor: default;
padding: 5px 8px 6px;
font-size: 14px;
overflow: hidden;
height: 32px;
"
>
howdie
</div>
div[style*="display: block"][style*="white-space: nowrap"]{
color:red;
}
<div
style="
display: block;
width: 200px;
border-right: 1px solid rgb(237, 237, 236);
white-space: nowrap;
min-height: 32px;
cursor: default;
padding: 5px 8px 6px;
font-size: 14px;
overflow: hidden;
height: 32px;
"
>
howdie
</div>
Related
I have a form in which one input field is select and it has few option.I am not able to increase the height of the option box and background color.presently it has white colour as given in the picture My html code and css code is below
.select2 {
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 4px 0;
margin: 4px 0;
border-bottom: 2px solid black;
background-color: transparent;
}
.select2 option{
width: 26px;
background-color: none ;
border: none;
background: none;
color: blue;
font-size: 20px;
font-weight:bold;
float: left;
margin: 0 10px;
white-sapce: no-wrap;
text-overflow: ellipsis;
}
.select2 after {
!content: 'Select Role';
font-family: 'material icons';
font-size: 24px;
color: red;
position: absolute;
right: 10px;
top: 10%;
transform: translateY(-50%);
pointer-events: none;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<div class="select2">
<i class="fas fa-user-lock" style="color:black; padding:10px;"> Role</i>
<select >
<option value=""></option>
<option value="user">USER</option>
<option value="rec">Recommending Officer</option>
<option value="store">Store</option>
</select>
</div>
You can use this to increase height:
.select2 select{
height: 50px;
background: transparent;
}
Add more properties here to style the box.
Also correct way to use before and after is :
.select2::after {
....
}
Codepen
Try giving style to select tag, this might works!
select{
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 20px;
}
Try this
.select2 {
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 4px 0;
margin: 4px 0;
}
select{
height:30px;
border-bottom: 2px solid black;
background-color: transparent;
}
I'm developing drop down list in polymer. Currently I have problem with CSS.
Here you can find example:
jsfiddle example
<div style="width:200px" class="button initial gray">
<div style="padding-left:12px;padding-right:12px;">
<div class="button-value truncated" style="width:inherit;">
Select value very long label with dots at the end
</div>
<div class="arrow">▼</div>
</div>
</div>
I need to create the following drop down list, but I have problem with arrow visible on the right of button.
Question is, how to achieve this:
gif example
I will be very grateful for your help !!!!
You need to use this
text-overflow: ellipsis;
overflow: hidden;
then you will see the three dots after your list item, but also you need to add width for your span
width: 100px
Code example
<div style="width:200px" class="button initial gray">
<div style="padding-left:12px;padding-right:12px;">
<div class="button-value truncated" style="width:158px; display: inline-block">
Select value very long label with dots at the end
</div>
<div style="display: inline-block;margin-top: 12px;vertical-align: top;"class="arrow">▼</div>
</div>
</div>
div.button.orange {
border: 1px solid #FF6200;
background: inherit;
background-color: #FF6200;
border-radius: 5px;
box-shadow: none;
font-family: 'ING Me';
font-weight: 400;
font-style: normal;
font-size: 12px;
color: white;
cursor: pointer;
height: 36px;
box-sizing: border-box;
box-shadow: 1px 1px 5px lightgray;
}
div.button.gray {
border: 1px solid #767676;
background: inherit;
background-color: white;
border-radius: 5px;
box-shadow: none;
font-family: 'ING Me';
font-weight: 400;
font-style: normal;
font-size: 12px;
color: #FF6200;
cursor: pointer;
height: 36px;
box-sizing: border-box;
box-shadow: 1px 1px 5px lightgray;
position:relative;
}
div.button.gray.initial {
color: #767676;
}
div.button.active {
border-radius: 4px 4px 0px 0px;
border: 1px solid #FF6200;
}
div.button-value {
text-align: center;
line-height: 36px;
width: inherit;
}
ul.options>li {
padding-left: 12px;
padding-right: 12px;
line-height: 36px;
}
.truncated {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
ul.options {
color: black;
list-style-image: none;
list-style: none;
list-style-type: none;
border-radius: 0px 0px 4px 4px;
box-sizing: border-box;
position: absolute;
width: auto;
margin: -1px;
padding: 0;
list-style: none;
border: 1px solid #FF6200;
border-top: none;
background-color: white;
box-shadow: 1px 1px 5px lightgray;
}
ul.options>ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul.options>li:hover {
color: white;
background-color: #FF6200;
text-decoration: underline;
}
.arrow{
position:absolute;
right:4px;
top:0;
line-height:36px;
}
<div style="width:200px" class="button initial gray">
<div style="padding-left:12px;padding-right:18px;">
<div class="button-value truncated" style="width:inherit;">
Select value very long label with dots at the end▼
</div>
<div class="arrow">▼</div>
</div>
</div>
This question already has answers here:
CSS vertical alignment of inline/inline-block elements
(4 answers)
Closed 5 years ago.
How can i put i div between 2 inputs, having same heights, vertical aligned? It sounds simple, and i don't understand why the following code don't work:
input{
width: 35%;
border: 1px solid #A7A7A7;
display: inline-block;
font-size: 11px;
padding: 0 5px;
line-height: 18px;
}
input:first-child{
border-right: none;
}
input:nth-child(3){
border-left: none;
}
#between_inputs{
width: 10px;
height: 18px;
display: inline-block;
background-color: white;
border-top: 1px solid #A7A7A7;
border-bottom: 1px solid #A7A7A7;
line-height: 18px;
}
<input type="text" name="min" placeholder="min."/><div id="between_inputs"></div><input type="text" name="max" placeholder="max."/>
Somehow the div is placed above the inputs? What is wrong?
You can do it with the Flexbox:
.flex {
display: flex; /* displays flex-items (children) inline */
}
input {
width: 35%;
border: 1px solid #A7A7A7;
display: inline-block;
font-size: 11px;
padding: 0 5px;
line-height: 18px;
}
input:first-child {
border-right: none;
}
input:nth-child(3) {
border-left: none;
}
#between_inputs {
/* flex-grow: 1; recommended, grows and takes the remaining horizontal space */
width: 10px;
/* height: 18px; not necessary, flex-items have the same height by default */
display: inline-block;
background: Lavender; /* just for demo */
border-top: 1px solid #A7A7A7;
border-bottom: 1px solid #A7A7A7;
line-height: 18px;
}
<div class="flex">
<input type="text" name="min" placeholder="min.">
<div id="between_inputs"></div>
<input type="text" name="max" placeholder="max.">
</div>
Add vertical-align to input:
input{
width: 35%;
border: 1px solid #A7A7A7;
display: inline-block;
font-size: 11px;
padding: 0 5px;
line-height: 18px;
vertical-align: top;/* <<<< this one */
}
You could add vertical-align: middle for both inputs and div , and decrease the height of div to make it 17px so they will be perfectly aligned.
input{
width: 35%;
border: 1px solid #A7A7A7;
display: inline-block;
font-size: 11px;
padding: 0 5px;
line-height: 18px;
vertical-align: middle
}
input:first-child{
border-right: none;
}
input:nth-child(3){
border-left: none;
}
#between_inputs{
width: 10px;
height: 17px;
display: inline-block;
background-color: white;
border-top: 1px solid #A7A7A7;
border-bottom: 1px solid #A7A7A7;
line-height: 18px;
vertical-align: middle
}
<input type="text" name="min" placeholder="min."/><div id="between_inputs"></div><input type="text" name="max" placeholder="max."/>
I want to create something like the picture, where the #body is between #leg1 and #leg2, three of them should be horizontally in line to the bottom. Any idea how to achieve this? I tweaked some property such as display:inline, or float:left, float:right, but none of them work as I expect.
.comment_leg {
s width: 60px;
/*height:18px;*/
background-color: #ffcc99;
padding: 5px;
text-align: center;
border-radius: 3px;
}
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block;
For Firefox
}
#body {
background-color: white;
/*position:relative;*/
border: 1px solid orange;
/*height:60px;*/
width: 500px;
padding: 10px;
color: black;
border-radius: 3px;
font-size: 18px;
/*border-color:yellow;*/
}
#body:focus {
outline-style: solid;
outline-color: orange;
outline-width: 0px;
}
<br>
<br>
<br>
<div class="comment_leg">leg1</div>
<div id="body" contenteditable="true" autocomplete="off" spellcheck="false" placeholder="Pika pi?"></div>
<div class="comment_leg">leg2</div>
From what I understood of your "凸" shape I guess this is what you want:
NOTE: You can adjust height and width depending on your preference.
.comment_leg {
width: 60px;
/*height:18px;*/
background-color: #ffcc99;
padding: 5px;
text-align: center;
border-radius: 3px;
vertical-align: bottom;
display: inline-block;
}
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block;
For Firefox
}
#body {
background-color: white;
border: 1px solid orange;
min-height:100px;
width: 150px;
padding: 10px;
color: black;
border-radius: 3px;
font-size: 18px;
display: inline-block;
vertical-align: bottom;
}
#body:focus {
outline-style: solid;
outline-color: orange;
outline-width: 0px;
}
<div class="comment_leg">leg1</div>
<div id="body" contenteditable="true" autocomplete="off" spellcheck="false" placeholder="Pika pi?"></div>
<div class="comment_leg">leg2</div>
i creating a tab view using divs. when one of the tab is active, i want to hide the outer divs bottom border so that i see the tab is selected.
but right now i see outer div bottom border, which is not great as in the image.
desired output:
my div is laid as:
<div class='clsTabContainer'>
<div class='clsCurrentTab'>Dashboard</div>
<div class='clsTab'>Leads</div>
<div class='clsTab'>Internet</div>
<div class='clsTab'>Tasks</div>
</div>
.clsTabContainer {
BACKGROUND-COLOR: #FFFFFF;
PADDING-LEFT: 0px;
WIDTH: 100%;
PADDING-RIGHT: 0px;
WHITE-SPACE: nowrap;
HEIGHT: 35px;
OVERFLOW: hidden;
PADDING-TOP: 3px;
border-bottom: #D0D0D0 1px solid;
}
.clsTab {
OVERFLOW-X: visible;
OVERFLOW-Y: hidden;
BACKGROUND-COLOR: #F0F0F0;
DISPLAY: inline-block;
WHITE-SPACE: nowrap;
HEIGHT: 100%;
FONT-SIZE: 10pt;
VERTICAL-ALIGN: middle;
CURSOR: pointer;
padding: 5px 10px 10px 10px;
margin-left: -1px;
border-left: #D0D0D0 1px solid;
border-right: #D0D0D0 1px solid;
border-top: #D0D0D0 1px solid;
}
.clsCurrentTab {
OVERFLOW-X: visible;
OVERFLOW-Y: hidden;
BACKGROUND-COLOR: #FFFFFF;
DISPLAY: inline-block;
WHITE-SPACE: nowrap;
HEIGHT: 100%;
FONT-SIZE: 10pt;
VERTICAL-ALIGN: middle;
CURSOR: pointer;
padding: 5px 10px 10px 10px;
margin-left: -1px;
border-left: #D0D0D0 1px solid;
border-right: #D0D0D0 1px solid;
border-top: #82C600 1px solid;
color: #82C600;
}
how to avoid outer divs border bottom on the selected div so that i see the corresponding tab is really looks selected.?
Following are the changes in current css to achieve this:
.clsTab {
height:19px;
}
.clsCurrentTab {
height:20px;
}
.clsTab,.clsCurrentTab {
vertical-align: top;
}
Remove overflow:hidden from .clsTabContainer.
See DEMO here.