Hide border and drop-down arrow_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:16:19

Original

2442 people have browsed it

Use CSS styles to hide the surrounding borders and drop-down arrows of

. It is mainly used for printing. For the sake of beauty, it only wants to display the selected content.
I used style control, and the effect can be achieved by testing it alone, but when placed in the in the list, the position is not beautiful, and the selected content presses the list line. What should I do?



张
台
米
piece
piece
block

The above can be tested on the page to achieve the effect I want. But



张
台
米
< option value="3" style="width:20px;">pieces
pieces
block



If is added outside and displayed in the list, there will be a problem of overlapping Chinese characters.
Please ask an expert to solve it! ! !

Reply to the discussion (solution)

You can change your mind and use js to solve it
Hide the select and add a textbox to display the value of the select. The approximate logic is as follows , the code has not been tested, and there may be wrong words. I did not use an IDE, so I uploaded the code directly!

function hiddenSelect(){
var slcList=document.getElementsByTagName('select');
var ipt ;
for(var i=0;i ipt = document.createElement("input");
ipt.setAttribute('slcValue',slcList[i].value); // Set the selected value
ipt.value = slcList[i ].options[slcList[i].selectedIndex].text;
slcList[i].parentNode.appendChild(ipt);
slcList[i].style.display="none";
}
}